構(gòu)建Canvas動(dòng)畫框架靈與肉的結(jié)合
今天一直在弄css3的立體效果,發(fā)現(xiàn)如果結(jié)合canvas和css3的3d,可以做出很多不可思議的效果來,大家可以發(fā)揮想象力!
接著上節(jié)講canvas動(dòng)畫框架:
1.通用類的提取:動(dòng)畫對象與幀對象
2.靈與肉的結(jié)合:便于拆卸的運(yùn)動(dòng)方程
3.進(jìn)度條的實(shí)現(xiàn):canvas的圖片預(yù)加載
4.demo測試:通過一個(gè)demo測試框架
這一節(jié)我們先來說說運(yùn)動(dòng)方程的疊加。
之前寫過的一個(gè)動(dòng)畫框架,并沒有把運(yùn)動(dòng)獨(dú)立出來。這樣造成的后果就是,每個(gè)動(dòng)畫對象沒有自己的運(yùn)動(dòng)個(gè)性!如果我們批量創(chuàng)建一百個(gè)動(dòng)畫對象,并且想讓它們每一個(gè)都擁有自己的運(yùn)動(dòng)屬性,將非常麻煩。
所以,將運(yùn)動(dòng)與形式相分離,是***的解決方案。
上節(jié)構(gòu)建canvas動(dòng)畫框架通用類的提取提到過,我們?yōu)锳niele動(dòng)畫對象創(chuàng)建了它自己的運(yùn)動(dòng)方程庫motionFncs。那么怎么操作這個(gè)運(yùn)動(dòng)方程庫呢?
- //添加運(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)方法庫里的所有運(yùn)動(dòng)方法
- countMotionFncs:function () {
- for (var i=0; i<this.motionFncs.length; i++) {
- if(this.motionFncs[i]==null)
- continue;
- this.motionFncs[i].call(this);
- }
- }
上節(jié)已經(jīng)介紹過,在Aniele動(dòng)畫對象中,我們添加了以上運(yùn)動(dòng)方法。
其中countMotionFncs是非常重要的一個(gè)方法,通過它的核心語句:this.motionFncs[i].call(this),我們把運(yùn)動(dòng)方程的this指針更改為動(dòng)畫對象,相當(dāng)于把命令給了動(dòng)畫對象,動(dòng)畫對象就會(huì)乖乖地區(qū)執(zhí)行一遍,比如我們定義了一個(gè)運(yùn)動(dòng)方程pass
- function pass(){
- thisthis.loca.x-=this.speed.x;
- }
我們定義一個(gè)小人的動(dòng)畫對象:
- man=new Aniele();
那么我可以用這個(gè)方法把運(yùn)動(dòng)方程添加到man的運(yùn)動(dòng)方法庫里面:
- man.addMotionFnc(0,run);
這樣,這個(gè)小man就擁有了一個(gè)運(yùn)動(dòng)屬性,只要我們在每一幀都執(zhí)行一下這個(gè)運(yùn)動(dòng)方程,就可以實(shí)現(xiàn)man的運(yùn)動(dòng)了!
運(yùn)動(dòng)方程庫中我們可以添加多個(gè)運(yùn)動(dòng)方程,運(yùn)動(dòng)方程會(huì)疊加而不互相影響,方便我們寫出非常復(fù)雜的運(yùn)動(dòng);并且在運(yùn)動(dòng)方程庫中,我們不僅可以制定運(yùn)動(dòng)對象坐標(biāo)的改變規(guī)則(運(yùn)動(dòng)),還可以隨意改變運(yùn)動(dòng)對象的其他屬性,包括透明度,翻轉(zhuǎn),縮放等等。
原文鏈接:http://www.cnblogs.com/shawn-xie/archive/2012/07/11/2586728.html
【編輯推薦】






























