構建canvas動畫框架（二）——靈與肉的結合

今天一直在弄css3的立體效果，發現如果結合canvas和css3的3d，可以做出很多不可思議的效果來，大家可以發揮想象力！

接着上節講canvas動畫框架：

1.通用類的提取：動畫對象與幀對象

2.靈與肉的結合：便於拆卸的運動方程

3.進度條的實現：canvas的圖片預加載

4.demo測試：通過一個demo測試框架

這一節我們先來說說運動方程的疊加。

之前寫過的一個動畫框架，並沒有把運動獨立出來。這樣造成的后果就是，每個動畫對象沒有自己的運動個性！如果我們批量創建一百個動畫對象，並且想讓它們每一個都擁有自己的運動屬性，將非常麻煩。

所以，將運動與形式相分離，是最好的解決方案。

上節提到過，我們為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(){
    this.loca.x-=this.speed.x;
}

我們定義一個小人的動畫對象：

man=new Aniele();

那么我可以用這個方法把運動方程添加到man的運動方法庫里面：

man.addMotionFnc(0,run);

這樣，這個小man就擁有了一個運動屬性，只要我們在每一幀都執行一下這個運動方程，就可以實現man的運動了！

運動方程庫中我們可以添加多個運動方程，運動方程會疊加而不互相影響，方便我們寫出非常復雜的運動；並且在運動方程庫中，我們不僅可以制定運動對象坐標的改變規則（運動），還可以隨意改變運動對象的其他屬性，包括透明度，翻轉，縮放等等。