用js实现动画

1. 体验动画

    
    
    


动画

通过setInterval每隔一定的时间向右走一些，实现了动画的效果，但是一旦动画开始不能停下来。

2. 动画封装

    
    
    



    运动到200
    运动到400
    

上面的改进的例子实现了盒子“走”到固定的位置就停下来，但是我们发现，他运动的方向是固定的，而且当第二次触发动画的时候，不会停下来。

3. 去除bug版

    
    
    



    运动到200
    运动到400
    

4. 最终版

    
    
    



    运动到200
    运动到400
    

    

5. window​.request​Animation​Frame

编写动画的关键是循环间隔的设置，一方面，循环间隔足够短，动画效果才能显得平滑流畅；另一方面，循环间隔还要足够长，才能确保浏览器有能力渲染产生的变化。

大部分的电脑显示器的刷新频率是60HZ，也就是每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会提升。因此，最平滑动画的最佳循环间隔是 1000ms / 60 ，约为16.7ms。

setTimeout/setInterval 有一个显著的缺陷在于时间是不精确的，setTimeout/setInterval 只能保证延时或间隔不小于设定的时间。因为它们实际上只是把任务添加到了任务队列中，但是如果前面的任务还没有执行完成，它们必须要等待。

requestAnimationFrame 采用的是系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。

综上所述，requestAnimationFrame 和 setTimeout/setInterval 在编写动画时相比，优点如下:

• requestAnimationFrame 不需要设置时间，采用系统时间间隔，能达到最佳的动画效果。
• requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成。
• 当 requestAnimationFrame() 运行在后台标签页或者隐藏的