Building a canvas animation framework (2)-a combination of spirit and flesh

Today, I have been working on the three-dimensional effects of css3. I found that, in combination with the 3d effects of canvas and css3, I can make a lot of incredible results, so that everyone can use their imagination!

Next, let's talk about the canvas animation framework in the previous section:

1. Extraction of common classes: animation objects and Frame Objects

2. The combination of spirit and meat: An easy-to-disassemble Motion Equation

3. Implementation of the progress bar: canvas image pre-loading

4. demo test: Use a demo test framework

Let's talk about this section first.Superposition of motion equations.

A previously written animation frame does not separate motion. The consequence is that each animation object does not have its own sports personality! If we create one hundred animation objects in batches and want each of them to have their own motion attributes, it will be very troublesome.

ThereforeSeparation of motion and formIs the best solution.

As mentioned above, we have created its own motion equation library motionFncs for the animation object of Aniele. So how can we operate on this library of motion equations?

// Add the motion method addMotionFnc: function (name, fnc) {this. motionFncs [name] = fnc;}, // Delete the motion method deleMotionFnc: function (name) {this. motionFncs [name] = null ;}, // traverse all the motion methods in the motion method library countMotionFncs: function () {for (var I = 0; I <this. motionFncs. length; I ++) {if (this. motionFncs [I] = null) continue; this. motionFncs [I]. call (this );}},

As mentioned in the previous section, we have added the above motion method to the animation objects of the Aniele animation.

Among them, countMotionFncs is a very important method, through its core statement: this. motionFncs [I]. call (this), we change the this pointer of the Motion Equation to an animated object, which is equivalent to giving the command to an animated object, and the animation object will be executed again in the cool area, for example, we define a motion equation pass.

function pass(){    this.loca.x-=this.speed.x;}

We define an animation object for a villain:

man=new Aniele();

Then I can use this method to add the motion equation to man's motion Cube:

man.addMotionFnc(0,run);

In this way, this small man has a motion attribute. As long as we execute this motion equation at each frame, we can achieve man's motion!

In the motion equation library, we can add multiple motion equations, which are superimposed without mutual influence, so that we can write very complex motion. In the library of motion equations, we can not only define the rules for Changing Motion Object coordinates (motion), but also arbitrarily change other attributes of the Motion Object, including transparency, flip, scaling, and so on.