[转载]构建canvas动画框架(二)

baacloud免费翻墙vpn注册使用

[转载]构建canvas动画框架(二) – shawn.xie – 博客园.

今天一直在弄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            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的运动了!

运动方程库中我们可以添加多个运动方程,运动方程会叠加而不互相影响,方便我们写出非常复杂的运动;并且在运动方程库中,我们不仅可以制定运动对象坐标的改变规则(运动),还可以随意改变运动对象的其他属性,包括透明度,翻转,缩放等等。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏