构建canvas动画框架通用类的提取

最近一直在做canvas动画效果，发现canvas这个东西做动画不是不可以。相对于flash，它太底层。如果有给力的编辑器或者给力的框架的话，它就能发挥出更大的威力。

于是决定自己写一个简单一点的动画框架，以便能更方便地构建出一些动画效果。

我将分几个章节来讲述我这个小动画框架的实现：

1.通用类的提取：动画对象与帧对象

2.灵与肉的结合：便于拆卸的运动方程

3.进度条的实现：canvas的图片预加载

4.demo测试：通过一个demo测试框架

这一节我们先来说说通用类的提取。

借鉴来的思路：一个动画对象（类似flash中的元件），一个帧对象（类似flash中的帧）。动画就是在不断在当前帧上绘制每个动画对象来实现的。有了这两个对象，再加上一些运动方法，我们就可以构建出动画来。

首先我们先来看看动画对象Aniele：

 
 
 
 
    
  
  
  
  
  1. /* 
    2. 
  
  
  
  
  2.  *Aniele动画对象 
    3. 
  
  
  
  
  3.  *所有动画对象的始祖 
    4. 
  
  
  
  
  4.  */ 
    5. 
  
  
  
  
  5.  var Aniele=function(){ 
    6. 
  
  
  
  
  6.      this.img=new Image(); 
    7. 
  
  
  
  
  7.      //定义动画对象位置 
    8. 
  
  
  
  
  8.      this.loca={ 
    9. 
  
  
  
  
  9.              x:300, 
    10. 
  
  
  
  
  10.              y:300 
    11. 
  
  
  
  
  11.      } 
    12. 
  
  
  
  
  12.      //定义动画对象的大小（可以实现缩放） 
    13. 
  
  
  
  
  13.      this.dw; 
    14. 
  
  
  
  
  14.      this.dh; 
    15. 
  
  
  
  
  15.      //动画对象的速度属性 
    16. 
  
  
  
  
  16.      this.speed={ 
    17. 
  
  
  
  
  17.              x:0, 
    18. 
  
  
  
  
  18.              y:0 
    19. 
  
  
  
  
  19.      }     
    20. 
  
  
  
  
  20.      //设置对象的透明度 
    21. 
  
  
  
  
  21.      this.alpha=1; 
    22. 
  
  
  
  
  22.      //设置图像翻转，1为不翻转，-1为翻转 
    23. 
  
  
  
  
  23.      this.scale={ 
    24. 
  
  
  
  
  24.              x:1, 
    25. 
  
  
  
  
  25.             y:1 
    26. 
  
  
  
  
  26.      } 
    27. 
  
  
  
  
  27.      //定动画对象的运动方法库 
    28. 
  
  
  
  
  28.      this.motionFncs=[]; 
    29. 
  
  
  
  
  29.  } 
    30. 
  
  
  
  
  30.  Aniele.prototype={ 
    31. 
  
  
  
  
  31.      //添加运动方法 
    32. 
  
  
  
  
  32.      addMotionFnc:function (name,fnc) { 
    33. 
  
  
  
  
  33.         this.motionFncs[name]=fnc; 
    34. 
  
  
  
  
  34.     }, 
    35. 
  
  
  
  
  35.     //删除运动方法 
    36. 
  
  
  
  
  36.     deleMotionFnc:function(name){ 
    37. 
  
  
  
  
  37.         this.motionFncs[name]=null; 
    38. 
  
  
  
  
  38.     }, 
    39. 
  
  
  
  
  39.     //遍历运动方法库里的所有运动方法 
    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.     //把自己绘制出来的方法，包括功能：水平翻转 
    48. 
  
  
  
  
  48.     draw:function(canvas,ctx){ 
    49. 
  
  
  
  
  49.         //存储canvas状态 
    50. 
  
  
  
  
  50.         ctx.save(); 
    51. 
  
  
  
  
  51.         //实现透明度的改变 
    52. 
  
  
  
  
  52.         ctx.globalAlpha=this.alpha; 
    53. 
  
  
  
  
  53.         //实现水平竖直翻转，定义drawImage的两个位置参数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.         //画出对象 
    74. 
  
  
  
  
  74.         ctx.drawImage(this.img,dx,dy,this.dw,this.dh); 
    75. 
  
  
  
  
  75.         //恢复canvas状态     
    76. 
  
  
  
  
  76.         ctx.restore(); 
    77. 
  
  
  
  
  77.     } 
    78. 
  
  
  
  
  78.  }
    79.

动画对象的主要属性：

this.img=new Image();我们引入一张图片，依附在动画对象上

this.loca.x等等;图片的大小位置透明度等等，便于绘图时调用

this.motionFncs=[];这个比较关键，我们给动画对象定义一个运动方法库，把动画对象的运动规则都放在这个运动方法库中统一管理（每个动画对象都有自己的运动方法库）

动画对象的主要方法：

addMotionFnc： 为动画对象的运动方法库中添加一个运动方法

deleMotionFnc：为动画对象的运动方法库中删除一个运动方法

countMotionFncs：为动画对象遍历运动方法库中的所有运动方法

draw：把动画对象画在画布上，这里我们会把画布作为参数传到这个方法里面去，便于绘图

在draw方法里，我封装了一些对图像的简单操作，这些操作在动画中会经常用到：透明，缩放和翻转。

有了这个，我们就好似获得了flash里的一个元件，我们可以通过修改它的属性来随意改变它。

那么帧对象呢？

帧对象肩负着渲染的任务，并且管理所有动画对象：

 
 
 
 
    
  
  
  
  
  1. /* 
    2. 
  
  
  
  
  2. *Render渲染对象 
    3. 
  
  
  
  
  3. *管理所有动画对象和渲染 
    4. 
  
  
  
  
  4. *参数：画布对象，画布上下文 
    5. 
  
  
  
  
  5. */ 
    6. 
  
  
  
  
  6. var Render=function (canvas,ctx) { 
    7. 
  
  
  
  
  7.     //引入画布 
    8. 
  
  
  
  
  8.     this.canvas=canvas; 
    9. 
  
  
  
  
  9.     this.ctx=ctx; 
    10. 
  
  
  
  
  10.     //创建一个缓冲画布 
    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.     //所有动画对象 
    16. 
  
  
  
  
  16.     this.aniEles=[]; 
    17. 
  
  
  
  
  17. } 
    18. 
  
  
  
  
  18. Render.prototype={ 
    19. 
  
  
  
  
  19.     //初始化画布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.     //设置开始渲染 
    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.         //在画布和缓存画布上清除历史帧 
    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.         //保存当前的实时输出帧率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.         //调用每个动画对象的运动方法 
    42. 
  
  
  
  
  42.         for (var i=0; i
  
  
  
  
  43.             if(this.aniEles[i]==null) 
    44. 
  
  
  
  
  44.                 continue; 
    45. 
  
  
  
  
  45.             this.aniEles[i].countMotionFncs(); 
    46. 
  
  
  
  
  46.             //把对象绘制到后台缓冲画布上 
    47. 
  
  
  
  
  47.             this.aniEles[i].draw(this.backBuffer,this.backBufferctx); 
    48. 
  
  
  
  
  48.         }     
    49. 
  
  
  
  
  49.         //把后台对象绘制到前台 
    50. 
  
  
  
  
  50.         this.ctx.drawImage(this.backBuffer,0,0); 
    51. 
  
  
  
  
  51.     }, 
    52. 
  
  
  
  
  52.     //增加动画对象 
    53. 
  
  
  
  
  53.     addAniEle:function (name,aniEle) { 
    54. 
  
  
  
  
  54.         this.aniEles[name]=aniEle; 
    55. 
  
  
  
  
  55.     }, 
    56. 
  
  
  
  
  56.     //删除动画对象 
    57. 
  
  
  
  
  57.     deleAniEle:function (name) { 
    58. 
  
  
  
  
  58.         this.aniEles[name]=null; 
    59. 
  
  
  
  
  59.     } 
    60. 
  
  
  
  
  60. }
    61.

帧对象的主要属性：

this.aniEles=[];用来存储当前画布上所有动画实例的数组

大家用过canvas载入图片的应该知道，由于图片的异步载入，动画过程中图片会出现闪烁的现象，为了避免这种现象，我采用了双缓冲。

首先后台创建一个画布：

 
 
 
 
    
  
  
  
  
  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.

我们所有绘制命令都执行在这个后台画布上，最后把后台画布画在前台画布上：

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

这种先把图绘在后台画布，再把后台画布复制到前台的方法就叫做双缓冲技术。

帧属性的主要方法：

int：用于初始化画布

begin：开始动画渲染的方法

render：主渲染的方法

addAniEle:为当前帧添加动画对象

deleAniEle：为当前帧删除动画

我们利用帧对象的流程是：先为当前帧添加动画对象，然后让当前帧开始渲染。

未完待续.......

分享标题：构建canvas动画框架通用类的提取
当前地址：http://www.shufengxianlan.com/qtweb/news49/455149.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸网站建设知识

分类信息网站

南宁旺客科技　　 　LED亮化工程　　 　成都服务器托管　　 　边坡柔性防护网　　 　重庆网站建设网络公司　　 　企业网站设计　　 　成都网站设计　　 　黔盛装饰　　 　成都网站制作　　 　成都橡塑保温板　　 　响应式网站　　 　古蔺网站建设　　 　成都网络营销　　 　网站收录　　 　全网营销网站推广　　 　成都建站　　 　小程序开发公司　　 　网站优化公司　　 　成都棕树机房　　 　重庆水土三线托管