Wednesday 28 December 2016

几种香料的翻译, some kinds of spice translation

肉豆蔻: Nutmeg
肉豆蔻皮;Mace
 荜菝 ;Long pepper or India long pepper(pipli)
良姜:Dried galangal
党参: Dangshen
丁香:Dried cloves
八角:star anise
香叶:Bay leaf
 草果: cao guo
茴香籽:Fennel seeds
白芷:Angelica dahurica, or bai zhi, Chinese Angelica, the Garden Angelica, Root of the Holy Ghost
当归:Angelica acutiloba or tōki or dang quai

Tuesday 27 December 2016

Angular js Diary 1,2

 Today is my first day to restart studying Angular js. Honestly, i did not understand it well, so i do not like it. However, this is my fate to try it again. Good luck for anyone has same fate as me!

 I am still happy i did my first Angular js Page


 the code is very easy. In this example, just helping me to understand how angular work, and some terminology.

Notice:

     1. add link of angular.min.js
     2. do not forget to add ng-app, it controls which part would implement angular js.
     3. {{}} this one is named binding expression.
 


here is how binding expression is working.




and




Day 2


1. module, it is like one package of Main() method.

   using module() method to create.

 module also can depend on another module.

2. controller, is javascript function.
    we also need to create controller too


3. register controller with module.module is like a container for different parts, i.e. controllers.


4. do not forget to add directives to html, ng-app and ng-controller.

5. add link app.js

Now you can see the result
(there is just one result, because I only put ng-control in first div)

that is all for today, thanks to kudvenkat, here is his video link;


Sunday 4 December 2016

GreenSock Learning, TweenLite, TweenMax basic


1. TweenLite.from (object x, time, {opacity:0, left:"1000px"});
 
     This Is an function, you can let one object moving from this position. Whereas, now you create this object, this position is the ending position. The location from function is where object moves from.
Left means distance from left-margin.

However, one thing is important here, which is in CSS, position has to be relative. Because it means that The element is positioned relative to its normal position. So if you do not put it, computer does not know what is the “left” meaning.



The second way:

TweenLite.from(document.getElementById("examp2"),10,{x: 1000});
Second way which is similar, but no need to set relative position. And set x needs to add {}.

2.
     

           TweenLite, to(document.getElementById(“”), 3,{x:1000, delay:3, ease:Strong.easeInOut});

This function is moving to this position, same as last one just opposite direction.
Variables:object, is setting x,y,delay, Ease ……… format:{x:100,delay:3}
Delay is going to happen before function starts.
Ease: giving a specific “feel”, it is the function how the object moves.
Alpha: visible value, for instance, if it TweenLite.from(……alpha:-1), object will be invisible to visible(from-1 to 1). Whereas value less than 0 is invisible.

                                                     升级版的公式(Lcomplex version)

In this function, variables: object, is more complex than before. It includes onComplete,(which is required function, means after moving, this function will be triggled), onCompleteParams(requires array, ??????)
Document.getElementById(“”).innerHTML=””; 

It is changing the element content, as in our element, there is no content, so it is adding content(letters) to our element.

3.   Document.querySelectorAll()



Here is one example to show how this function works. There are 2 <p> tags, this function could distinguish which element to use. So we do not need to declare another class or id to distinguish between <p> element. (checking w3 school example), according to the example, if you use x instead of x[0], then it would change both of it.

This selector also could use in this way, (selecting all of them, but function will work one by one, instead of work as one group).

4. TweenMax() extend TweenLite, adding repeat(), yoyo(), staggerFrom(),staggerTo().
   


I use                             
                                                             Is  equal  to
                           
And my code is

What I want is moving “sub1”, “sub2”, “sub3” separately, so how to choose selector is one problem. StaggerTo() include this function. And document.querySelectorAll() could use for 2 purpose, moving as 1 group or moving seperately.

Other function:

Math.random() from javascript, output random decimal number (0.3454).

Yoyo(), the tween to go back and forth, alternating backward and forward on each repeat./按照原路径返回/

Repeat(), /重复路径, 建议与yoyo配合使用/, repeat:-1, means repeat all the time without stop.

5. TimelineLite() and TimelineMax()

   Both of this function work similar.

   For example,


Even you changed to TimelineMax(), still works same.
But now there is one difference:

I want this function could repeat, but in TimelineLite could not add repeat function, but TimelineMax could.

6.Difference staggerFrom() and from(), staggerTo() and to();
I will use the same function to show the difference.


Duration:19s, from left:1000, without opacity, delay is 7.
All of element will move “together”, delay together.
StaggerFrom(),(delay is 1s)

If delay is 7s,
It means each element will be delayed for 7 seconds.
Note: staggerFrom is using in TimeLineLite or TweenMax not in TweenLite