千年殇,殿上欢

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

構(gòu)建canvas動(dòng)畫框架通用類的提取

最近一直在做canvas動(dòng)畫效果，發(fā)現(xiàn)canvas這個(gè)東西做動(dòng)畫不是不可以。相對(duì)于flash，它太底層。如果有給力的編輯器或者給力的框架的話，它就能發(fā)揮出更大的威力。

于是決定自己寫一個(gè)簡單一點(diǎn)的動(dòng)畫框架，以便能更方便地構(gòu)建出一些動(dòng)畫效果。

我將分幾個(gè)章節(jié)來講述我這個(gè)小動(dòng)畫框架的實(shí)現(xiàn)：

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

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

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

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

這一節(jié)我們先來說說通用類的提取。

借鑒來的思路：一個(gè)動(dòng)畫對(duì)象（類似flash中的元件），一個(gè)幀對(duì)象（類似flash中的幀）。動(dòng)畫就是在不斷在當(dāng)前幀上繪制每個(gè)動(dòng)畫對(duì)象來實(shí)現(xiàn)的。有了這兩個(gè)對(duì)象，再加上一些運(yùn)動(dòng)方法，我們就可以構(gòu)建出動(dòng)畫來。

首先我們先來看看動(dòng)畫對(duì)象Aniele：

 
 
 
 
  
  
  
  /* 
  
  
  
   *Aniele動(dòng)畫對(duì)象 
  
  
  
   *所有動(dòng)畫對(duì)象的始祖 
  
  
  
   */ 
  
  
  
   var Aniele=function(){ 
  
  
  
       this.img=new Image(); 
  
  
  
       //定義動(dòng)畫對(duì)象位置 
  
  
  
       this.loca={ 
  
  
  
               x:300, 
  
  
  
               y:300 
  
  
  
       } 
  
  
  
       //定義動(dòng)畫對(duì)象的大?。梢詫?shí)現(xiàn)縮放） 
  
  
  
       this.dw; 
  
  
  
       this.dh; 
  
  
  
       //動(dòng)畫對(duì)象的速度屬性 
  
  
  
       this.speed={ 
  
  
  
               x:0, 
  
  
  
               y:0 
  
  
  
       }     
  
  
  
       //設(shè)置對(duì)象的透明度 
  
  
  
       this.alpha=1; 
  
  
  
       //設(shè)置圖像翻轉(zhuǎn)，1為不翻轉(zhuǎn)，-1為翻轉(zhuǎn) 
  
  
  
       this.scale={ 
  
  
  
               x:1, 
  
  
  
              y:1 
  
  
  
       } 
  
  
  
       //定動(dòng)畫對(duì)象的運(yùn)動(dòng)方法庫 
  
  
  
       this.motionFncs=[]; 
  
  
  
   } 
  
  
  
   Aniele.prototype={ 
  
  
  
       //添加運(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
  
  
  
  
            if(this.motionFncs[i]==null) 
  
  
  
                  continue; 
  
  
  
              this.motionFncs[i].call(this); 
  
  
  
          } 
  
  
  
      }, 
  
  
  
      //把自己繪制出來的方法，包括功能：水平翻轉(zhuǎn) 
  
  
  
      draw:function(canvas,ctx){ 
  
  
  
          //存儲(chǔ)canvas狀態(tài) 
  
  
  
          ctx.save(); 
  
  
  
          //實(shí)現(xiàn)透明度的改變 
  
  
  
          ctx.globalAlpha=this.alpha; 
  
  
  
          //實(shí)現(xiàn)水平豎直翻轉(zhuǎn)，定義drawImage的兩個(gè)位置參數(shù)dx，dy 
  
  
  
          var dx=this.loca.x; 
  
  
  
          var dy=this.loca.y; 
  
  
  
          if(this.scale.x!=1||this.scale.y!=1){ 
  
  
  
              if(this.scale.x<0){ 
  
  
  
                  console.log(this.img.width) 
  
  
  
                  dx=canvas.width-this.loca.x-this.img.width; 
  
  
  
                  ctx.translate(canvas.width,1); 
  
  
  
                  ctx.scale(this.scale.x,1); 
  
  
  
              }     
  
  
  
              if(this.scale.y<0){ 
  
  
  
                  dy=canvas.height-this.loca.y-this.img.height; 
  
  
  
                  ctx.translate(1,canvas.height); 
  
  
  
                  ctx.scale(1,this.scale.y); 
  
  
  
              }     
  
  
  
          } 
  
  
  
          if(this.dw==null) 
  
  
  
              thisthis.dw=this.img.width; 
  
  
  
          if(this.dh==null) 
  
  
  
               thisthis.dh=this.img.height; 
  
  
  
          //畫出對(duì)象 
  
  
  
          ctx.drawImage(this.img,dx,dy,this.dw,this.dh); 
  
  
  
          //恢復(fù)canvas狀態(tài)     
  
  
  
          ctx.restore(); 
  
  
  
      } 
  
  
  
   }

動(dòng)畫對(duì)象的主要屬性：

this.img=new Image();我們引入一張圖片，依附在動(dòng)畫對(duì)象上

this.loca.x等等;圖片的大小位置透明度等等，便于繪圖時(shí)調(diào)用

this.motionFncs=[];這個(gè)比較關(guān)鍵，我們給動(dòng)畫對(duì)象定義一個(gè)運(yùn)動(dòng)方法庫，把動(dòng)畫對(duì)象的運(yùn)動(dòng)規(guī)則都放在這個(gè)運(yùn)動(dòng)方法庫中統(tǒng)一管理（每個(gè)動(dòng)畫對(duì)象都有自己的運(yùn)動(dòng)方法庫）

動(dòng)畫對(duì)象的主要方法：

addMotionFnc：為動(dòng)畫對(duì)象的運(yùn)動(dòng)方法庫中添加一個(gè)運(yùn)動(dòng)方法

deleMotionFnc：為動(dòng)畫對(duì)象的運(yùn)動(dòng)方法庫中刪除一個(gè)運(yùn)動(dòng)方法

countMotionFncs：為動(dòng)畫對(duì)象遍歷運(yùn)動(dòng)方法庫中的所有運(yùn)動(dòng)方法

draw：把動(dòng)畫對(duì)象畫在畫布上，這里我們會(huì)把畫布作為參數(shù)傳到這個(gè)方法里面去，便于繪圖

在draw方法里，我封裝了一些對(duì)圖像的簡單操作，這些操作在動(dòng)畫中會(huì)經(jīng)常用到：透明，縮放和翻轉(zhuǎn)。

有了這個(gè)，我們就好似獲得了flash里的一個(gè)元件，我們可以通過修改它的屬性來隨意改變它。

那么幀對(duì)象呢？

幀對(duì)象肩負(fù)著渲染的任務(wù)，并且管理所有動(dòng)畫對(duì)象：

 
 
 
 
  
  
  
  /* 
  
  
  
  *Render渲染對(duì)象 
  
  
  
  *管理所有動(dòng)畫對(duì)象和渲染 
  
  
  
  *參數(shù)：畫布對(duì)象，畫布上下文 
  
  
  
  */ 
  
  
  
  var Render=function (canvas,ctx) { 
  
  
  
      //引入畫布 
  
  
  
      this.canvas=canvas; 
  
  
  
      this.ctx=ctx; 
  
  
  
      //創(chuàng)建一個(gè)緩沖畫布 
  
  
  
      this.backBuffer=document.createElement('canvas'); 
  
  
  
      thisthis.backBuffer.width=this.canvas.width; 
  
  
  
      thisthis.backBuffer.height=this.canvas.height; 
  
  
  
      thisthis.backBufferctx=this.backBuffer.getContext('2d'); 
  
  
  
      //所有動(dòng)畫對(duì)象 
  
  
  
      this.aniEles=[]; 
  
  
  
  } 
  
  
  
  Render.prototype={ 
  
  
  
      //初始化畫布int 
  
  
  
      int:function () { 
  
  
  
          clearInterval(this.sint); 
  
  
  
          this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); 
  
  
  
          this.backBufferctx.clearRect(0,0,this.backBuffer.width,this.backBuffer.height); 
  
  
  
      }, 
  
  
  
      //設(shè)置開始渲染 
  
  
  
      begin:function () { 
  
  
  
          this.lastFrame=(new Date()).getTime(); 
  
  
  
          this.sint=setInterval((function(progra){ 
  
  
  
              return function(){progra.render();} 
  
  
  
          })(this),SECOND);     
  
  
  
      }, 
  
  
  
      //主渲染方法 
  
  
  
      render:function () { 
  
  
  
          //在畫布和緩存畫布上清除歷史幀 
  
  
  
          this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); 
  
  
  
          this.backBufferctx.clearRect(0,0,this.backBuffer.width,this.backBuffer.height); 
  
  
  
          //保存當(dāng)前的實(shí)時(shí)輸出幀率this.ftp 
  
  
  
          this.nowFrame=(new Date()).getTime(); 
  
  
  
          this.ftp=1000/(this.nowFrame-this.lastFrame); 
  
  
  
          thisthis.lastFrame=this.nowFrame; 
  
  
  
          //調(diào)用每個(gè)動(dòng)畫對(duì)象的運(yùn)動(dòng)方法 
  
  
  
          for (var i=0; i
  
  
  
  
            if(this.aniEles[i]==null) 
  
  
  
                  continue; 
  
  
  
              this.aniEles[i].countMotionFncs(); 
  
  
  
              //把對(duì)象繪制到后臺(tái)緩沖畫布上 
  
  
  
              this.aniEles[i].draw(this.backBuffer,this.backBufferctx); 
  
  
  
          }     
  
  
  
          //把后臺(tái)對(duì)象繪制到前臺(tái) 
  
  
  
          this.ctx.drawImage(this.backBuffer,0,0); 
  
  
  
      }, 
  
  
  
      //增加動(dòng)畫對(duì)象 
  
  
  
      addAniEle:function (name,aniEle) { 
  
  
  
          this.aniEles[name]=aniEle; 
  
  
  
      }, 
  
  
  
      //刪除動(dòng)畫對(duì)象 
  
  
  
      deleAniEle:function (name) { 
  
  
  
          this.aniEles[name]=null; 
  
  
  
      } 
  
  
  
  }

幀對(duì)象的主要屬性：

this.aniEles=[];用來存儲(chǔ)當(dāng)前畫布上所有動(dòng)畫實(shí)例的數(shù)組

大家用過canvas載入圖片的應(yīng)該知道，由于圖片的異步載入，動(dòng)畫過程中圖片會(huì)出現(xiàn)閃爍的現(xiàn)象，為了避免這種現(xiàn)象，我采用了雙緩沖。

首先后臺(tái)創(chuàng)建一個(gè)畫布：

 
 
 
 
  
  
  
  this.backBuffer=document.createElement('canvas'); 
  
  
  
  thisthis.backBuffer.width=this.canvas.width; 
  
  
  
  thisthis.backBuffer.height=this.canvas.height; 
  
  
  
  thisthis.backBufferctx=this.backBuffer.getContext('2d');

我們所有繪制命令都執(zhí)行在這個(gè)后臺(tái)畫布上，最后把后臺(tái)畫布畫在前臺(tái)畫布上：

 
 
 
 
  
  
  
  this.ctx.drawImage(this.backBuffer,0,0);

這種先把圖繪在后臺(tái)畫布，再把后臺(tái)畫布復(fù)制到前臺(tái)的方法就叫做雙緩沖技術(shù)。

幀屬性的主要方法：

int：用于初始化畫布

begin：開始動(dòng)畫渲染的方法

render：主渲染的方法

addAniEle:為當(dāng)前幀添加動(dòng)畫對(duì)象

deleAniEle：為當(dāng)前幀刪除動(dòng)畫

我們利用幀對(duì)象的流程是：先為當(dāng)前幀添加動(dòng)畫對(duì)象，然后讓當(dāng)前幀開始渲染。

未完待續(xù).......

網(wǎng)站名稱：構(gòu)建canvas動(dòng)畫框架通用類的提取
網(wǎng)站URL：http://m.fisionsoft.com.cn/article/dppeedh.html

新聞中心

其他資訊