構(gòu)建canvas動畫框架通用類的提取
最近一直在做canvas動畫效果，發(fā)現(xiàn)canvas這個東西做動畫不是不可以。相對于flash，它太底層。如果有給力的編輯器或者給力的框架的話，它就能發(fā)揮出更大的威力。
于是決定自己寫一個簡單一點的動畫框架，以便能更方便地構(gòu)建出一些動畫效果。
我將分幾個章節(jié)來講述我這個小動畫框架的實現(xiàn)：
1.通用類的提取：動畫對象與幀對象
2.靈與肉的結(jié)合：便于拆卸的運(yùn)動方程
3.進(jìn)度條的實現(xiàn)：canvas的圖片預(yù)加載
4.demo測試：通過一個demo測試框架
這一節(jié)我們先來說說通用類的提取。
借鑒來的思路：一個動畫對象（類似flash中的元件），一個幀對象（類似flash中的幀）。動畫就是在不斷在當(dāng)前幀上繪制每個動畫對象來實現(xiàn)的。有了這兩個對象，再加上一些運(yùn)動方法，我們就可以構(gòu)建出動畫來。
首先我們先來看看動畫對象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
- }
- //設(shè)置對象的透明度
- this.alpha=1;
- //設(shè)置圖像翻轉(zhuǎn)，1為不翻轉(zhuǎn)，-1為翻轉(zhuǎn)
- this.scale={
- x:1,
- y:1
- }
- //定動畫對象的運(yùn)動方法庫
- this.motionFncs=[];
- }
- Aniele.prototype={
- //添加運(yùn)動方法
- addMotionFnc:function (name,fnc) {
- this.motionFncs[name]=fnc;
- },
- //刪除運(yùn)動方法
- deleMotionFnc:function(name){
- this.motionFncs[name]=null;
- },
- //遍歷運(yùn)動方法庫里的所有運(yùn)動方法
- countMotionFncs:function () {
- for (var i=0; i<this.motionFncs.length; i++) {
- if(this.motionFncs[i]==null)
- continue;
- this.motionFncs[i].call(this);
- }
- },
- //把自己繪制出來的方法，包括功能：水平翻轉(zhuǎn)
- draw:function(canvas,ctx){
- //存儲canvas狀態(tài)
- ctx.save();
- //實現(xiàn)透明度的改變
- ctx.globalAlpha=this.alpha;
- //實現(xiàn)水平豎直翻轉(zhuǎ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);
- //恢復(fù)canvas狀態(tài)
- ctx.restore();
- }
- }
動畫對象的主要屬性：
this.img=new Image();我們引入一張圖片，依附在動畫對象上
this.loca.x等等;圖片的大小位置透明度等等，便于繪圖時調(diào)用
this.motionFncs=[];這個比較關(guān)鍵，我們給動畫對象定義一個運(yùn)動方法庫，把動畫對象的運(yùn)動規(guī)則都放在這個運(yùn)動方法庫中統(tǒng)一管理（每個動畫對象都有自己的運(yùn)動方法庫）
動畫對象的主要方法：
addMotionFnc： 為動畫對象的運(yùn)動方法庫中添加一個運(yùn)動方法
deleMotionFnc：為動畫對象的運(yùn)動方法庫中刪除一個運(yùn)動方法
countMotionFncs：為動畫對象遍歷運(yùn)動方法庫中的所有運(yùn)動方法
draw：把動畫對象畫在畫布上，這里我們會把畫布作為參數(shù)傳到這個方法里面去，便于繪圖
在draw方法里，我封裝了一些對圖像的簡單操作，這些操作在動畫中會經(jīng)常用到：透明，縮放和翻轉(zhuǎn)。
有了這個，我們就好似獲得了flash里的一個元件，我們可以通過修改它的屬性來隨意改變它。
那么幀對象呢？
幀對象肩負(fù)著渲染的任務(wù)，并且管理所有動畫對象：
- /*
- *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);
- },
- //設(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)前的實時輸出幀率this.ftp
- this.nowFrame=(new Date()).getTime();
- this.ftp=1000/(this.nowFrame-this.lastFrame);
- thisthis.lastFrame=this.nowFrame;
- //調(diào)用每個動畫對象的運(yùn)動方法
- 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=[];用來存儲當(dāng)前畫布上所有動畫實例的數(shù)組
大家用過canvas載入圖片的應(yīng)該知道，由于圖片的異步載入，動畫過程中圖片會出現(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);
這種先把圖繪在后臺畫布，再把后臺畫布復(fù)制到前臺的方法就叫做雙緩沖技術(shù)。
幀屬性的主要方法：
int：用于初始化畫布
begin：開始動畫渲染的方法
render：主渲染的方法
addAniEle:為當(dāng)前幀添加動畫對象
deleAniEle：為當(dāng)前幀刪除動畫
我們利用幀對象的流程是：先為當(dāng)前幀添加動畫對象，然后讓當(dāng)前幀開始渲染。
未完待續(xù).......
原文鏈接：http://www.cnblogs.com/shawn-xie/archive/2012/07/11/2585551.html
【編輯推薦】
