H5js Two-dimensional animation production! Basic operation of Two.js Class2

In the previous section we talked about how to create a graph and set up a group, and this section explains how to build an animation effect

varElem = document.getElementById ('draw-animation'); varboth =NewBoth ({width:285, Height: $}). AppendTo (Elem); varCircle = two.makecircle (- -,0, -); varRect = Two.makerectangle ( -,0, -, -); Circle.fill='#FF8000'; Circle.stroke='orangered'; Rect.fill='rgba (0, 255, 0.75)'; Rect.stroke='#1C75BC'; varGroup =Two.makegroup (Circle, rect); Group.translation.Set(Two.width/2, Two.height/2);Group.linewidth =5; Two.update ();

According to the previous explanation, the first two shapes are drawn

Create an animation that is small to large and rotated, and you need to narrow the graphic first

0.1;

The code to create the animation is as follows:

//bind can bind a function to express animation properties in a function//two parameters, the first parameter is a string format, which indicates the event to listen on, the second argument is a function, the argument in the function is the number of framesTwo.bind ('Update', Function (framecount) {//the code means that each call is executed once two.update (); The number of frames is 60 times per second, which executes 60 times per second.          if(Group.scale >0.9999) {Group.scale= 0.1;//turns zoom and turn into 0, which is the initial position          }          //Set the property association equation for time and animation changes          varT = (1-Group.scale) *0.125;//declares a t variable that decreases as the scale increases and determines other relationships, and if scaling can go to 1,time it becomes 0Group.scale + = t;//The scaling is constantly +=time, and as the scaling increases, the first relationship decreases time, so scaling increases by 1.1. Assuming that the scaling can be 1, the scaling stops increasingGroup.rotation + = T *4* MATH.PI;//4 times times the +=time of rotation (Math.PI is 180 degrees)                          });  Two.play (); //last. Play (); Start animation

It is important to note that Two.play () and two.update () cannot be used at the same time and will lose effect, so use Two.play () to delete the original two.update ().

As the animation effect of the above code

If you want to make changes yourself, you need to adjust the equations below, for example, to add a transparency effect

          if (group.opacity<0) {              group.opacity=1;          }           0.01;

The effect that can be produced by adding code like above in bind

Isn't it fun?

The following is a simple code for a planetary trajectory that you can modify to make a simple planetary motion trajectory animation

<script type="Text/javascript">varElem = document.getElementById ('draw-animation'); varboth =NewBoth ({width: the, Height: the}). AppendTo (Elem); //track outer large running trajectory        varTrack = Two.makecircle (0,0, $); Track.fill='Transparent';//Transparent.Track.stroke='#3366FF'; Track.linewidth=3; //Star        varSun = Two.makecircle (0,0, the); Sun.fill='#FF8000'; Sun.stroke='#FF0000'; Sun.linewidth=5; //Earth        varearth = Two.makecircle (0,0, -); Earth.fill='#9ACD32'; //Moon        varMoon = Two.makecircle ( -,0, -); Moon.fill='#1C75BC'; //Small running track of the inline        varinline = Two.makecircle (0,0, -); Inline.stroke='#3366FF'; Inline.fill='Transparent'; Inline.linewidth=3; //Group group One type is a set of        varGroup =Two.makegroup (Inline,earth,moon); varGroup1 =Two.makegroup (Sun,track,group); Group1.translation.Set(Two.width/2, Two.height/2);//where to shift the overall directionGroup.translation.Set( $,0); Group.scale=0.7;//proportionsTwo.bind ('Update', function (Framecount) {//Performing animationsgroup1.rotation+=0.003*2*Math.PI; Group.rotation+=0.003*Math.PI;}). Play (); </script>

Effect

So Two.js simply explained here, there are more property methods waiting for everyone to develop, there is nothing to improve the welcome guidance

H5js Two-dimensional animation production! Basic operation of Two.js Class2