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

于是決定自己寫一個簡單一點的動畫框架，以便能更方便地構建出一些動畫效果。

我將分幾個章節(jié)來講述我這個小動畫框架的實現(xiàn)：

1.通用類的提?。簞赢媽ο笈c幀對象

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

3.進度條的實現(xiàn)：canvas的圖片預加載

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

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

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

首先我們先來看看動畫對象Aniele：

/*  
 *Aniele動畫對象  
 *所有動畫對象的始祖  
 */  
 var Aniele=function(){  
     this.img=new Image();  
     //定義動畫對象位置  
     this.loca={  
             x:300,  
             y:300  
     }  
     //定義動畫對象的大小（可以實現(xiàn)縮放）  
     this.dw;  
     this.dh;  
     //動畫對象的速度屬性  
     this.speed={  
             x:0,  
             y:0  
     }      
     //設置對象的透明度  
     this.alpha=1;  
     //設置圖像翻轉，1為不翻轉，-1為翻轉  
     this.scale={  
             x:1,  
            y:1  
     }  
     //定動畫對象的運動方法庫  
     this.motionFncs=[];  
 }  
 Aniele.prototype={  
     //添加運動方法  
     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);  
        }  
    },  
    //把自己繪制出來的方法，包括功能：水平翻轉  
    draw:function(canvas,ctx){  
        //存儲canvas狀態(tài)  
        ctx.save();  
        //實現(xiàn)透明度的改變  
        ctx.globalAlpha=this.alpha;  
        //實現(xiàn)水平豎直翻轉，定義drawImage的兩個位置參數(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;  
        //畫出對象  
        ctx.drawImage(this.img,dx,dy,this.dw,this.dh);  
        //恢復canvas狀態(tài)      
        ctx.restore();  
    }  
 } 

動畫對象的主要屬性：

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

this.loca.x等等;圖片的大小位置透明度等等，便于繪圖時調用

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

動畫對象的主要方法：

addMotionFnc： 為動畫對象的運動方法庫中添加一個運動方法

deleMotionFnc：為動畫對象的運動方法庫中刪除一個運動方法

countMotionFncs：為動畫對象遍歷運動方法庫中的所有運動方法

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

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

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

那么幀對象呢？

幀對象肩負著渲染的任務，并且管理所有動畫對象：

/*  
*Render渲染對象  
*管理所有動畫對象和渲染  
*參數(shù)：畫布對象，畫布上下文  
*/  
var Render=function (canvas,ctx) {  
    //引入畫布  
    this.canvas=canvas;  
    this.ctx=ctx;  
    //創(chuàng)建一個緩沖畫布  
    this.backBuffer=document.createElement('canvas');  
    thisthis.backBuffer.width=this.canvas.width;  
    thisthis.backBuffer.height=this.canvas.height;  
    thisthis.backBufferctx=this.backBuffer.getContext('2d');  
    //所有動畫對象  
    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);  
    },  
    //設置開始渲染  
    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);  
        //保存當前的實時輸出幀率this.ftp  
        this.nowFrame=(new Date()).getTime();  
        this.ftp=1000/(this.nowFrame-this.lastFrame);  
        thisthis.lastFrame=this.nowFrame;  
        //調用每個動畫對象的運動方法  
        for (var i=0; i<this.aniEles.length; i++) {  
            if(this.aniEles[i]==null)  
                continue;  
            this.aniEles[i].countMotionFncs();  
            //把對象繪制到后臺緩沖畫布上  
            this.aniEles[i].draw(this.backBuffer,this.backBufferctx);  
        }      
        //把后臺對象繪制到前臺  
        this.ctx.drawImage(this.backBuffer,0,0);  
    },  
    //增加動畫對象  
    addAniEle:function (name,aniEle) {  
        this.aniEles[name]=aniEle;  
    },  
    //刪除動畫對象  
    deleAniEle:function (name) {  
        this.aniEles[name]=null;  
    }  
} 

幀對象的主要屬性：

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

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

首先后臺創(chuàng)建一個畫布：

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

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

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

這種先把圖繪在后臺畫布，再把后臺畫布復制到前臺的方法就叫做雙緩沖技術。

幀屬性的主要方法：

int：用于初始化畫布

begin：開始動畫渲染的方法

render：主渲染的方法

addAniEle:為當前幀添加動畫對象

deleAniEle：為當前幀刪除動畫

我們利用幀對象的流程是：先為當前幀添加動畫對象，然后讓當前幀開始渲染。

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

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

【編輯推薦】

1. HTML 5 Canvas濾鏡預研
2. HTML 5 Canvas組件繪制太極圖案
3. 使用JavaScript和Canvas寫一個游戲框架
4. 使用 HTML5 canvas 繪制精美的圖形
5. HTML5 Canvas基礎教程