JavaScript动画

JavaScript动画

1、动画方法：
可以用CSS3的animattion+keyframes；
可以用CSS3的transition；
可以用canvas上作图来实现动画；
可以用jQuery动画相关API方便实现；
可以用widow.setTimeout()或者window.setInterval()，通过不断更新元素状态位置等来实现动画，前提动画更新频率达到每秒60此才能流畅的动画效果。
可以用window.requestAnimationFrame(）方法来实现动画
2、widnow.requsetAnimationFrame()方法
原理与setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，
但它优于setTimeout/setInrerval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动调用优化方法的调用，
并且如果也没不是激活状态下，动画会自动暂停，节省CPU。
（1）语法
可以直接调用，也可以通过window来调用，接受一个函数作为回调，返回一个ID值，通过这个ID值传给widow.cancelAnimationFrame()可以取消该动画
requestAnimationFrame(callback) //callback回调函数
例子：

%


window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;var start = null;var ele = document.getElementById("test");var progress = 0;function step() {  
    progress += 1;
    ele.style.width = progress + "%";
    ele.innerHTML=progress + "%";
    if (progress < 100) {
        requestAnimationFrame(step);//自己循环
    }
}
requestAnimationFrame(step);
//首先执行一次document.getElementById("run").addEventListener("click", function() {
    ele.style.width = "1px";
    progress = 0;
    requestAnimationFrame(step);

例子2：

  
    
    
  
   
        
Click the box to stop and start it
         
Hello there.
         
  

本示例使用getElementById将div元素保存在一个全局变量中，调用renderLoop()函数开始动画。在重新定位div元素后，在此调用requestAnimationFrame以设置下一次移动。此操作将继续执行，直至关闭浏览器或者单击div元素位置。
addEventListener方法处理div元素上的单击事件。当你单击元素时，将使用句柄
（2）对requestAnimationFrame更牢靠的封装

(function(){
     var lastTime=0;
     var vendors=['webkit','moz'];
     fo(var x=0;x

元素位置运动

元素透明度

缓冲动作

传递参数

    
    
    



    
a
    
b
    
c

如果传入的参数是透明度如何处理

    
    
    



    
a
    
b
    
c

链式运动

    
    
    



    
a
    
b
    
c

多物体运动 完美的框架

    
    
    



    
a
    
b
    
c