91在线一级黄片|91视频在线观看18|成人夜间呦呦网站|91资源欧美日韩超碰|久久最新免费精品视频一区二区三区|国产探花视频在线观看|黄片真人免费三级片毛片|国产人无码视频在线|精品成人影视无码三区|久久视频爱久久免费精品

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
構(gòu)建canvas動(dòng)畫(huà)框架通用類的提取

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

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

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

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ō)通用類的提取。

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

首先我們先來(lái)看看動(dòng)畫(huà)對(duì)象Aniele：

 
 
 
 
    
  
  
  
  
  1. /* 
    2. 
  
  
  
  
  2.  *Aniele動(dòng)畫(huà)對(duì)象 
    3. 
  
  
  
  
  3.  *所有動(dòng)畫(huà)對(duì)象的始祖 
    4. 
  
  
  
  
  4.  */ 
    5. 
  
  
  
  
  5.  var Aniele=function(){ 
    6. 
  
  
  
  
  6.      this.img=new Image(); 
    7. 
  
  
  
  
  7.      //定義動(dòng)畫(huà)對(duì)象位置 
    8. 
  
  
  
  
  8.      this.loca={ 
    9. 
  
  
  
  
  9.              x:300, 
    10. 
  
  
  
  
  10.              y:300 
    11. 
  
  
  
  
  11.      } 
    12. 
  
  
  
  
  12.      //定義動(dòng)畫(huà)對(duì)象的大?。梢詫?shí)現(xiàn)縮放） 
    13. 
  
  
  
  
  13.      this.dw; 
    14. 
  
  
  
  
  14.      this.dh; 
    15. 
  
  
  
  
  15.      //動(dòng)畫(huà)對(duì)象的速度屬性 
    16. 
  
  
  
  
  16.      this.speed={ 
    17. 
  
  
  
  
  17.              x:0, 
    18. 
  
  
  
  
  18.              y:0 
    19. 
  
  
  
  
  19.      }     
    20. 
  
  
  
  
  20.      //設(shè)置對(duì)象的透明度 
    21. 
  
  
  
  
  21.      this.alpha=1; 
    22. 
  
  
  
  
  22.      //設(shè)置圖像翻轉(zhuǎn)，1為不翻轉(zhuǎn)，-1為翻轉(zhuǎn) 
    23. 
  
  
  
  
  23.      this.scale={ 
    24. 
  
  
  
  
  24.              x:1, 
    25. 
  
  
  
  
  25.             y:1 
    26. 
  
  
  
  
  26.      } 
    27. 
  
  
  
  
  27.      //定動(dòng)畫(huà)對(duì)象的運(yùn)動(dòng)方法庫(kù) 
    28. 
  
  
  
  
  28.      this.motionFncs=[]; 
    29. 
  
  
  
  
  29.  } 
    30. 
  
  
  
  
  30.  Aniele.prototype={ 
    31. 
  
  
  
  
  31.      //添加運(yùn)動(dòng)方法 
    32. 
  
  
  
  
  32.      addMotionFnc:function (name,fnc) { 
    33. 
  
  
  
  
  33.         this.motionFncs[name]=fnc; 
    34. 
  
  
  
  
  34.     }, 
    35. 
  
  
  
  
  35.     //刪除運(yùn)動(dòng)方法 
    36. 
  
  
  
  
  36.     deleMotionFnc:function(name){ 
    37. 
  
  
  
  
  37.         this.motionFncs[name]=null; 
    38. 
  
  
  
  
  38.     }, 
    39. 
  
  
  
  
  39.     //遍歷運(yùn)動(dòng)方法庫(kù)里的所有運(yùn)動(dòng)方法 
    40. 
  
  
  
  
  40.     countMotionFncs:function () { 
    41. 
  
  
  
  
  41.         for (var i=0; i
  
  
  
  
  42.             if(this.motionFncs[i]==null) 
    43. 
  
  
  
  
  43.                 continue; 
    44. 
  
  
  
  
  44.             this.motionFncs[i].call(this); 
    45. 
  
  
  
  
  45.         } 
    46. 
  
  
  
  
  46.     }, 
    47. 
  
  
  
  
  47.     //把自己繪制出來(lái)的方法，包括功能：水平翻轉(zhuǎn) 
    48. 
  
  
  
  
  48.     draw:function(canvas,ctx){ 
    49. 
  
  
  
  
  49.         //存儲(chǔ)canvas狀態(tài) 
    50. 
  
  
  
  
  50.         ctx.save(); 
    51. 
  
  
  
  
  51.         //實(shí)現(xiàn)透明度的改變 
    52. 
  
  
  
  
  52.         ctx.globalAlpha=this.alpha; 
    53. 
  
  
  
  
  53.         //實(shí)現(xiàn)水平豎直翻轉(zhuǎn)，定義drawImage的兩個(gè)位置參數(shù)dx，dy 
    54. 
  
  
  
  
  54.         var dx=this.loca.x; 
    55. 
  
  
  
  
  55.         var dy=this.loca.y; 
    56. 
  
  
  
  
  56.         if(this.scale.x!=1||this.scale.y!=1){ 
    57. 
  
  
  
  
  57.             if(this.scale.x<0){ 
    58. 
  
  
  
  
  58.                 console.log(this.img.width) 
    59. 
  
  
  
  
  59.                 dx=canvas.width-this.loca.x-this.img.width; 
    60. 
  
  
  
  
  60.                 ctx.translate(canvas.width,1); 
    61. 
  
  
  
  
  61.                 ctx.scale(this.scale.x,1); 
    62. 
  
  
  
  
  62.             }     
    63. 
  
  
  
  
  63.             if(this.scale.y<0){ 
    64. 
  
  
  
  
  64.                 dy=canvas.height-this.loca.y-this.img.height; 
    65. 
  
  
  
  
  65.                 ctx.translate(1,canvas.height); 
    66. 
  
  
  
  
  66.                 ctx.scale(1,this.scale.y); 
    67. 
  
  
  
  
  67.             }     
    68. 
  
  
  
  
  68.         } 
    69. 
  
  
  
  
  69.         if(this.dw==null) 
    70. 
  
  
  
  
  70.             thisthis.dw=this.img.width; 
    71. 
  
  
  
  
  71.         if(this.dh==null) 
    72. 
  
  
  
  
  72.              thisthis.dh=this.img.height; 
    73. 
  
  
  
  
  73.         //畫(huà)出對(duì)象 
    74. 
  
  
  
  
  74.         ctx.drawImage(this.img,dx,dy,this.dw,this.dh); 
    75. 
  
  
  
  
  75.         //恢復(fù)canvas狀態(tài)     
    76. 
  
  
  
  
  76.         ctx.restore(); 
    77. 
  
  
  
  
  77.     } 
    78. 
  
  
  
  
  78.  }
    79.

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

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

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

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

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

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

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

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

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

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

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

那么幀對(duì)象呢？

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

 
 
 
 
    
  
  
  
  
  1. /* 
    2. 
  
  
  
  
  2. *Render渲染對(duì)象 
    3. 
  
  
  
  
  3. *管理所有動(dòng)畫(huà)對(duì)象和渲染 
    4. 
  
  
  
  
  4. *參數(shù)：畫(huà)布對(duì)象，畫(huà)布上下文 
    5. 
  
  
  
  
  5. */ 
    6. 
  
  
  
  
  6. var Render=function (canvas,ctx) { 
    7. 
  
  
  
  
  7.     //引入畫(huà)布 
    8. 
  
  
  
  
  8.     this.canvas=canvas; 
    9. 
  
  
  
  
  9.     this.ctx=ctx; 
    10. 
  
  
  
  
  10.     //創(chuàng)建一個(gè)緩沖畫(huà)布 
    11. 
  
  
  
  
  11.     this.backBuffer=document.createElement('canvas'); 
    12. 
  
  
  
  
  12.     thisthis.backBuffer.width=this.canvas.width; 
    13. 
  
  
  
  
  13.     thisthis.backBuffer.height=this.canvas.height; 
    14. 
  
  
  
  
  14.     thisthis.backBufferctx=this.backBuffer.getContext('2d'); 
    15. 
  
  
  
  
  15.     //所有動(dòng)畫(huà)對(duì)象 
    16. 
  
  
  
  
  16.     this.aniEles=[]; 
    17. 
  
  
  
  
  17. } 
    18. 
  
  
  
  
  18. Render.prototype={ 
    19. 
  
  
  
  
  19.     //初始化畫(huà)布int 
    20. 
  
  
  
  
  20.     int:function () { 
    21. 
  
  
  
  
  21.         clearInterval(this.sint); 
    22. 
  
  
  
  
  22.         this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); 
    23. 
  
  
  
  
  23.         this.backBufferctx.clearRect(0,0,this.backBuffer.width,this.backBuffer.height); 
    24. 
  
  
  
  
  24.     }, 
    25. 
  
  
  
  
  25.     //設(shè)置開(kāi)始渲染 
    26. 
  
  
  
  
  26.     begin:function () { 
    27. 
  
  
  
  
  27.         this.lastFrame=(new Date()).getTime(); 
    28. 
  
  
  
  
  28.         this.sint=setInterval((function(progra){ 
    29. 
  
  
  
  
  29.             return function(){progra.render();} 
    30. 
  
  
  
  
  30.         })(this),SECOND);     
    31. 
  
  
  
  
  31.     }, 
    32. 
  
  
  
  
  32.     //主渲染方法 
    33. 
  
  
  
  
  33.     render:function () { 
    34. 
  
  
  
  
  34.         //在畫(huà)布和緩存畫(huà)布上清除歷史幀 
    35. 
  
  
  
  
  35.         this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); 
    36. 
  
  
  
  
  36.         this.backBufferctx.clearRect(0,0,this.backBuffer.width,this.backBuffer.height); 
    37. 
  
  
  
  
  37.         //保存當(dāng)前的實(shí)時(shí)輸出幀率this.ftp 
    38. 
  
  
  
  
  38.         this.nowFrame=(new Date()).getTime(); 
    39. 
  
  
  
  
  39.         this.ftp=1000/(this.nowFrame-this.lastFrame); 
    40. 
  
  
  
  
  40.         thisthis.lastFrame=this.nowFrame; 
    41. 
  
  
  
  
  41.         //調(diào)用每個(gè)動(dòng)畫(huà)對(duì)象的運(yùn)動(dòng)方法 
    42. 
  
  
  
  
  42.         for (var i=0; i
  
  
  
  
  43.             if(this.aniEles[i]==null) 
    44. 
  
  
  
  
  44.                 continue; 
    45. 
  
  
  
  
  45.             this.aniEles[i].countMotionFncs(); 
    46. 
  
  
  
  
  46.             //把對(duì)象繪制到后臺(tái)緩沖畫(huà)布上 
    47. 
  
  
  
  
  47.             this.aniEles[i].draw(this.backBuffer,this.backBufferctx); 
    48. 
  
  
  
  
  48.         }     
    49. 
  
  
  
  
  49.         //把后臺(tái)對(duì)象繪制到前臺(tái) 
    50. 
  
  
  
  
  50.         this.ctx.drawImage(this.backBuffer,0,0); 
    51. 
  
  
  
  
  51.     }, 
    52. 
  
  
  
  
  52.     //增加動(dòng)畫(huà)對(duì)象 
    53. 
  
  
  
  
  53.     addAniEle:function (name,aniEle) { 
    54. 
  
  
  
  
  54.         this.aniEles[name]=aniEle; 
    55. 
  
  
  
  
  55.     }, 
    56. 
  
  
  
  
  56.     //刪除動(dòng)畫(huà)對(duì)象 
    57. 
  
  
  
  
  57.     deleAniEle:function (name) { 
    58. 
  
  
  
  
  58.         this.aniEles[name]=null; 
    59. 
  
  
  
  
  59.     } 
    60. 
  
  
  
  
  60. }
    61.

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

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

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

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

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

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

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

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

幀屬性的主要方法：

int：用于初始化畫(huà)布

begin：開(kāi)始動(dòng)畫(huà)渲染的方法

render：主渲染的方法

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

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

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

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


分享標(biāo)題：構(gòu)建canvas動(dòng)畫(huà)框架通用類的提取
本文網(wǎng)址：http://m.jiaoqi3.com/article/dppeedh.html