构建Canvas动画框架灵与肉的结合

[[84440]]

今天一直在弄css3的立体效果，发现如果结合canvas和css3的3d，可以做出很多不可思议的效果来，大家可以发挥想象力！

接着上节讲canvas动画框架：

1.通用类的提取：动画对象与帧对象

2.灵与肉的结合：便于拆卸的运动方程

3.进度条的实现：canvas的图片预加载

4.demo测试：通过一个demo测试框架

这一节我们先来说说运动方程的叠加。

之前写过的一个动画框架，并没有把运动独立出来。这样造成的后果就是，每个动画对象没有自己的运动个性！如果我们批量创建一百个动画对象，并且想让它们每一个都拥有自己的运动属性，将非常麻烦。

所以，将运动与形式相分离，是***的解决方案。

上节构建canvas动画框架通用类的提取提到过，我们为Aniele动画对象创建了它自己的运动方程库motionFncs。那么怎么操作这个运动方程库呢？

　　//添加运动方法
     addMotionFnc:function (name,fnc) {
        this.motionFncs[name]=fnc;
    },
    //删除运动方法
    deleMotionFnc:function(name){
        this.motionFncs[name]=null;
    },
    //遍历运动方法库里的所有运动方法
    countMotionFncs:function () {
        for (var i=0; i<this.motionFncs.length; i++) {
            if(this.motionFncs[i]==null)
                continue;
            this.motionFncs[i].call(this);
        }
    }

上节已经介绍过，在Aniele动画对象中，我们添加了以上运动方法。

其中countMotionFncs是非常重要的一个方法，通过它的核心语句：this.motionFncs[i].call(this)，我们把运动方程的this指针更改为动画对象，相当于把命令给了动画对象，动画对象就会乖乖地区执行一遍，比如我们定义了一个运动方程pass

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

我们定义一个小人的动画对象：

man=new Aniele();

那么我可以用这个方法把运动方程添加到man的运动方法库里面：

man.addMotionFnc(0,run);

这样，这个小man就拥有了一个运动属性，只要我们在每一帧都执行一下这个运动方程，就可以实现man的运动了！

运动方程库中我们可以添加多个运动方程，运动方程会叠加而不互相影响，方便我们写出非常复杂的运动；并且在运动方程库中，我们不仅可以制定运动对象坐标的改变规则（运动），还可以随意改变运动对象的其他属性，包括透明度，翻转，缩放等等。

原文链接：http://www.cnblogs.com/shawn-xie/archive/2012/07/11/2586728.html