动画学习笔记

平滑动画基本原理

function animate(){
    var box = document.getElementById("box");
    var duration = 1000;
    var start = (new Date).valueOf();
    var finish = start + duration;
    var interval = null;

    interval = setInterval(function(){
        var time = (new Date).valueOf();
        var frame = (time > finish)?1:(time - start)/duration;

        box.style.left = frame*100 + "px";

        if(time > finish){
            clearInterval(interval);
        }
    },10);
}

jQuery的动画为了稳定与兼容的选择，所以即使在目前的2.1的版本中也是采用了帧动画而不是最新的CSS3动画，帧动画的原理和动画片的制作是一样的

book.animate({
  left:"+=50"
}).animate({
  left:"+=100"
}).animate({
  left:"-=50"
});

因为动画是异步的，但是animate方法的链式代码是同步的，所以这里涉及一个最重要的问题，动画队列要如何有序的调用？

传统的思路：

• 定时器setTimeout方法收集，用一个数组保存每一个animate方法，把animate排成队列，在之后开始执行动画
• 这里存在一个严重的问题，让定时器产生足够长的时间差，在这个时间差内收集animate方法

jQuery为动画量身定制了队列机制，思路是这样的：

• 有一个队列，在执行第一个animate方法的时候加入就开始执行动画，因为动自己在执行的时候就会产生异步的时间差
• 我们在这个时间差的里面继续加入之后的动画animate队列

转载于:https://my.oschina.net/u/1792175/blog/598107