构建Canvas动画框架灵与肉的结合

今天一直在弄css3的立体效果，发现如果结合canvas和css3的3d，可以做出很多不可思议的效果来，大家可以发挥想象力！

接着上节讲canvas动画框架：

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

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

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

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

这一节我们先来说说运动方程的叠加。

之前写过的一个动画框架，并没有把运动独立出来。这样造成的后果就是，每个动画对象没有自己的运动个性！如果我们批量创建一百个动画对象，并且想让它们每一个都拥有自己的运动属性，将非常麻烦。

所以，将运动与形式相分离，是***的解决方案。

上节构建canvas动画框架通用类的提取提到过，我们为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(){  
   
  
  
    thisthis.loca.x-=this.speed.x;  
   
  
  
} 
  
 
 

我们定义一个小人的动画对象：

  
 
 

   
  
  
man=new Aniele(); 
  
 
 

那么我可以用这个方法把运动方程添加到man的运动方法库里面：

  
 
 

   
  
  
man.addMotionFnc(0,run); 
  
 
 

这样，这个小man就拥有了一个运动属性，只要我们在每一帧都执行一下这个运动方程，就可以实现man的运动了！

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

原文链接：http://www.cnblogs.com/shawn-xie/archive/2012/07/11/2586728.html

标题名称：构建Canvas动画框架灵与肉的结合
网页路径：http://www.shufengxianlan.com/qtweb/news25/459425.html

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

广告

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