一个JS动画框架-基于HTML5::Canvas

 

好久之前，发现必须应该有个动画框架，才能支持开发出更加复杂的动画效果。所以在学习Canvas的过程中，我就萌发了这样的念头，在无数大神大牛的启发下，今天“出厂”一个小的动画框架，希望能和有兴趣的朋友一起探讨交流一下。

1、实现精灵

模仿Flash的动画里面有帧和精灵（sprite）的概念，由于canvas只是一个元素，并没有相应的这些东西。所以在这里，我参照别人的思想，实现一个精灵父类，让所有的精灵对象都继承它。代码如下：

/* **精灵父类 */ var Sprite=function(){}; Sprite.prototype={ /* **每个精灵对象自己的draw函数 */ draw:function(){ }, /* **添加运动方式 */ addMotionWay:function(fun){ this.motionFunc.push(fun); }, /* **运动计算 */ countMotionFun:function(stepTime){ for(var i=this.motionFunc.length;i--; ){ this.motionFunc[i].call(this,stepTime/100); } this.draw(); } }  

 

2、实现帧

在实现了精灵后，所以我就在前人的代码上，增加一些自己的东西，实现一个Canvas类，实现JS的“帧”。代码如下： 之所以用setTimeout而不用setInterval，原因是每一帧的计算时间如果定死了，当动画中的精灵比较多的时候，相应的运动计算量比较大，如果进入下一帧，相应的计算却还没计算好，将出现跳帧。所以，我采用setTimeout，将每一帧的计算完成后，才进行下一帧。

/* ** Canvas类 管理所有动画实体sprites */ var Canvas=function(id){ //关联canvas元素 this.canvas=document.getElementById(id); //精灵字典 this.sprites=[]; //当前帧数 this.frame; this.frameNum; //所关联canvas元素上下文对象 this.ctx=this.canvas.getContext('2d'); //帧长 this.stepTime; //触发器 this.sT; } Canvas.prototype={ /* **初始化 */ init:function(){ this.fps=0; //记录最后一帧的时间 this.lastFrameTime=(new Date()).getTime(); this.frame=0;//当前帧数归0 this.frameNum=30;//每30帧计算一次fps this.stepTime=1;//和fps成反比 }, /* **开始 */ begin:function(){ this.sT=setTimeout((function(param){ return function(){ param.render();} })(this),this.stepTime); }, /* **渲染, */ render:function(){ //计算fps,参考oldj http://oldj.net/ this.frame++; if(this.frame % this.frameNum == 0){ // t = (new Date()).getTime(); this.fps= Math.round((this.frameNum*10000)/ (t - this.lastFrameTime)) / 10; this.lastFrameTime = t; showFps(this.fps); // 动态调整 step_time ，保证 fps 恒定 if (this.fps < 29.6 && this.stepTime > 10) { this.stepTime--; } else if (this.fps > 30.4) { this.stepTime++; } } this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); //调用每个精灵的运动方程 for(var i in this.sprites){ if(typeof(this.sprites[i])=="function") continue; this.sprites[i].countMotionFun(this.stepTime); } this.sT=setTimeout((function(param){ return function(){ param.render();} })(this),this.stepTime); }, /* **添加动画元素 */ addSprite:function(name,sprite){ this.sprites[name]=sprite; }, /* **删除动画元素 */ removeSprite:function(name){ if(this.sprites[name]){ delete this.sprites[name]; } }, /* **停止动画 */ stop:function(){ clearInterval(this.sT) }, clear:function(){ for(var i in this.sprites){ if(typeof(this.sprites[i])=="function") continue; delete this.sprites[i]; } } }  

3、关于运动

原来我一直在纠结这个问题，不知道如何计算运动，我的意思是，运动的形式各种各样，要封装起来不是那么简单，后来看了Milo大神关于运动学的模拟，顿时貌似顿开，运用了欧拉方法，使用二维的矢量类来表示一切速度，加速度，位置。

4、运动的叠加

一个元素的运动，不可能只是单一一种运动，所以在框架中，我使用了一个数组：motionFunc，来保存每个元素自己特有的运动方程，并且可以叠加，在最后的例子可以看到，一个直线运动叠加往返运动。

5、实现FPS

FPS，哦，这个我知道，第一人称射击游戏嘛，我的最爱-_-|||。
FPS：Frames Per Second 每秒传输帧数。也就是刷新频率。玩过3D游戏都知道，FPS越高，游戏越流畅。
FPS值=每秒/每帧用过的时间。
最好取平均值计算比较准确。
感谢oldj大哥对我的指导。这里计算FPS的思路和代码参考oldj大哥

好了，一个小小的框架就完成了，下面看看效果。按add增加小球

 

(转自：http://www.funnyhao.com/a-js-animation-framework-based-on-html5-canvas/)