日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

今天一直在弄css3的立體效果，發(fā)現(xiàn)如果結(jié)合canvas和css3的3d，可以做出很多不可思議的效果來(lái)，大家可以發(fā)揮想象力！

接著上節(jié)講canvas動(dòng)畫(huà)框架：

1.通用類的提?。簞?dòng)畫(huà)對(duì)象與幀對(duì)象

2.靈與肉的結(jié)合：便于拆卸的運(yùn)動(dòng)方程

3.進(jìn)度條的實(shí)現(xiàn)：canvas的圖片預(yù)加載

4.demo測(cè)試：通過(guò)一個(gè)demo測(cè)試框架

這一節(jié)我們先來(lái)說(shuō)說(shuō)運(yùn)動(dòng)方程的疊加。

之前寫(xiě)過(guò)的一個(gè)動(dòng)畫(huà)框架，并沒(méi)有把運(yùn)動(dòng)獨(dú)立出來(lái)。這樣造成的后果就是，每個(gè)動(dòng)畫(huà)對(duì)象沒(méi)有自己的運(yùn)動(dòng)個(gè)性！如果我們批量創(chuàng)建一百個(gè)動(dòng)畫(huà)對(duì)象，并且想讓它們每一個(gè)都擁有自己的運(yùn)動(dòng)屬性，將非常麻煩。

所以，將運(yùn)動(dòng)與形式相分離，是***的解決方案。

上節(jié)構(gòu)建canvas動(dòng)畫(huà)框架通用類的提取提到過(guò)，我們?yōu)锳niele動(dòng)畫(huà)對(duì)象創(chuàng)建了它自己的運(yùn)動(dòng)方程庫(kù)motionFncs。那么怎么操作這個(gè)運(yùn)動(dòng)方程庫(kù)呢？

  
 
 

   
  
  
　　//添加運(yùn)動(dòng)方法  
   
  
  
     addMotionFnc:function (name,fnc) {  
   
  
  
        this.motionFncs[name]=fnc;  
   
  
  
    },  
   
  
  
    //刪除運(yùn)動(dòng)方法  
   
  
  
    deleMotionFnc:function(name){  
   
  
  
        this.motionFncs[name]=null;  
   
  
  
    },  
   
  
  
    //遍歷運(yùn)動(dòng)方法庫(kù)里的所有運(yùn)動(dòng)方法  
   
  
  
    countMotionFncs:function () {  
   
  
  
        for (var i=0; i   
  
  
            if(this.motionFncs[i]==null)  
   
  
  
                continue;  
   
  
  
            this.motionFncs[i].call(this);  
   
  
  
        }  
   
  
  
    }
  
 
 

上節(jié)已經(jīng)介紹過(guò)，在Aniele動(dòng)畫(huà)對(duì)象中，我們添加了以上運(yùn)動(dòng)方法。

其中countMotionFncs是非常重要的一個(gè)方法，通過(guò)它的核心語(yǔ)句：this.motionFncs[i].call(this)，我們把運(yùn)動(dòng)方程的this指針更改為動(dòng)畫(huà)對(duì)象，相當(dāng)于把命令給了動(dòng)畫(huà)對(duì)象，動(dòng)畫(huà)對(duì)象就會(huì)乖乖地區(qū)執(zhí)行一遍，比如我們定義了一個(gè)運(yùn)動(dòng)方程pass

  
 
 

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

我們定義一個(gè)小人的動(dòng)畫(huà)對(duì)象：

  
 
 

   
  
  
man=new Aniele(); 
  
 
 

那么我可以用這個(gè)方法把運(yùn)動(dòng)方程添加到man的運(yùn)動(dòng)方法庫(kù)里面：

  
 
 

   
  
  
man.addMotionFnc(0,run); 
  
 
 

這樣，這個(gè)小man就擁有了一個(gè)運(yùn)動(dòng)屬性，只要我們?cè)诿恳粠紙?zhí)行一下這個(gè)運(yùn)動(dòng)方程，就可以實(shí)現(xiàn)man的運(yùn)動(dòng)了！

運(yùn)動(dòng)方程庫(kù)中我們可以添加多個(gè)運(yùn)動(dòng)方程，運(yùn)動(dòng)方程會(huì)疊加而不互相影響，方便我們寫(xiě)出非常復(fù)雜的運(yùn)動(dòng)；并且在運(yùn)動(dòng)方程庫(kù)中，我們不僅可以制定運(yùn)動(dòng)對(duì)象坐標(biāo)的改變規(guī)則（運(yùn)動(dòng)），還可以隨意改變運(yùn)動(dòng)對(duì)象的其他屬性，包括透明度，翻轉(zhuǎn)，縮放等等。

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

文章標(biāo)題：構(gòu)建Canvas動(dòng)畫(huà)框架靈與肉的結(jié)合
轉(zhuǎn)載注明：http://www.dlmjj.cn/article/ccegssj.html