requestAnimationFrame动画

现在一说起动画大家可能第一个想到的就是CSS3的animation，简单的也可以用transition，当然不要忘记除了CSS,JS也是可以实现动画效果的

原则上能用CSS的地方就尽量不要用JS,但前提是两者都能实现，那么有没有什么场景是CSS的animation实现不了的呢？当然有

某些属性的改变动画animation是不能实现的，比如scrollTop。
animation支持的缓动效果有限，对于一些需要复杂缓动的动画来说，显然是没有办法的

针对上边CSS不能实现的动画，就该JavaScript出手了

定时器

那么以前说到JS动画，好像就是定时器的事了，setInterval和setTimeout是我们经常会用的，但是定时器也有自己的缺陷：

不能针对不同显示器的刷新频率精确设置最佳的时间间隔
由于自身的运行机制，会在执行过程中受到其他任务的影响，从而导致延误执行。

requestAnimationFrame有什么好？

接下来终于该我们的主角登场了，针对上面的问题 requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短而造成多余的绘制，也不会因为间隔时间太长而是动画卡顿不流畅，此外如果页面不是激活的状态下，动画会自动暂停，有效节省了CPU开销，

简单点说，就是在使用requestAnimationFrame的时候，浏览器帮我们自动做了很多优化工作，让动画更流畅，解决了定时器的性能问题。

定义

window.requestAnimationFrame()方法告诉浏览器执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画，该方法使用一个回调函数，作为参数，这个回调函数会在浏览器重绘之前调用。

语法

window.requestAnimationFrome(callback)

callback 回调函数只有一个参数 DOMhighResTimeStamp,意思是每次回调函数开始执行的时间，需要注意一下，这个参数也是时间戳，但是和Date.now() 获取到的时间戳不一样，但你可以记住一点，两个参数相减就能得到这之间的时间间隔，单位是毫秒，通常情况下咱们需要用的就是这个差值。

返回值

返回一个整数唯一标示，可被window.cancelAnimationFrame()用来取消动画。

示例

接下来我们看见一个简单的例子

var start=1;
var ele=document.getElementById('ele')
ele.style.position='absolute'

function step(timestamp){
    start+=1;
    ele.style.left=start+'px';
    if(start<100){
        window.requestAnimationFrame(step)
    }
}

window.requestAnimationFrame(step)

可以看到，requestAnimationFrame 本质上是借用了递归来实现的动画效果