构建canvas动画框架(二)——灵与肉的结合
2012-07-11 17:42
281 查看
今天一直在弄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的运动了!
运动方程库中我们可以添加多个运动方程,运动方程会叠加而不互相影响,方便我们写出非常复杂的运动;并且在运动方程库中,我们不仅可以制定运动对象坐标的改变规则(运动),还可以随意改变运动对象的其他属性,包括透明度,翻转,缩放等等。
相关文章推荐
- 构建canvas动画框架(一)——通用类的提取
- 构建canvas动画框架(三)——canvas图片预加载及进度条的实现
- 结合nodejs,grunt,seajs及实际产品需要,设计一个简单的前端自动化构建框架
- CreateJS结合Falsh工具生成Canvas动画(加密字符串的由来)
- Yii框架和Vue的完美结合构建前后端分离项目
- Android 中通过Canvas 与线程结合实现动画效果
- 构造函数 + 原型链继承 + 临摹面向对象模式的canvas动画框架
- html5 canvas结合js实现的非常酷的ascii animation动画特效
- 一个JS动画框架-基于HTML5::Canvas
- SurfaceView与Canvas的结合实现简单的图形绘制与动画效果
- html5 canvas结合js实现的非常酷的ascii animation动画特效
- 11、《每周一点canvas动画》 —— 弹性动画
- 使用React前端框架结合js-ipfs-api实现IPFS的文本数据流传输
- web前端框架中bootstrap学习,并且网页中插件动画插件的使用。
- DirectX学习第二篇:构建框架
- ASP.Net Ajax框架 UpdateProgress控件 页面刷新等待动画
- Android游戏开发之构建游戏框架View与SurFaceView的区别(十)
- 用 Composer构建自己的 PHP 框架之基础准备
- nodejs前端框架 express4以及express-generator构建前端项目
- 构建基于MVC+Observer模式的、艺术性的移动开发框架(KJAVA版)(一)