构建canvas动画框架(二)——灵与肉的结合
今天一直在弄css3的立体效果,发现如果结合canvas和css3的3d,可以做出很多不可思议的效果来,大家可以发挥想象力!
接着上节讲canvas动画框架:
1.通用类的提取:动画对象与帧对象
2.灵与肉的结合:便于拆卸的运动方程
3.进度条的实现:canvas的图片预加载
4.demo测试:通过一个demo测试框架
这一节我们先来说说运动方程的叠加。
之前写过的一个动画框架,并没有把运动独立出来。这样造成的后果就是,每个动画对象没有自己的运动个性!如果我们批量创建一百个动画对象,并且想让它们每一个都拥有自己的运动属性,将非常麻烦。
所以,将运动与形式相分离,是最好的解决方案。
上节提到过,我们为Aniele动画对象创建了它自己的运动方程库motionFncs。那么怎么操作这个运动方程库呢?
//添加运动方法 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); } },
上节已经介绍过,在Aniele动画对象中,我们添加了以上运动方法。
其中countMotionFncs是非常重要的一个方法,通过它的核心语句:this.motionFncs[i].call(this),我们把运动方程的this指针更改为动画对象,相当于把命令给了动画对象,动画对象就会乖乖地区执行一遍,比如我们定义了一个运动方程pass
function pass(){ this.loca.x-=this.speed.x; }
我们定义一个小人的动画对象:
man=new Aniele();
那么我可以用这个方法把运动方程添加到man的运动方法库里面:
man.addMotionFnc(0,run);
这样,这个小man就拥有了一个运动属性,只要我们在每一帧都执行一下这个运动方程,就可以实现man的运动了!
运动方程库中我们可以添加多个运动方程,运动方程会叠加而不互相影响,方便我们写出非常复杂的运动;并且在运动方程库中,我们不仅可以制定运动对象坐标的改变规则(运动),还可以随意改变运动对象的其他属性,包括透明度,翻转,缩放等等。
posted on 2012-07-11 17:42 shawn.xie 阅读(3693) 评论(0) 编辑 收藏 举报