requestAnimationFrame 动画

requestAnimationFrame ： 调用这个方法，就是告诉浏览器要执行动画了，从而浏览器自动计算动画时间间隔，从而在恰当的时候刷新UI, 动画更加平滑。

他的用法和setTimeout() 一致，只是不用告诉浏览器循环间隔，而是让浏览器自己决定，各大浏览器都会充分利用自己的性能。

创建一个简单的动画，

function animation(){
     var div = document.getElementById("div1");
     div.style.left = div.offsetLeft + 10 + "px";
}

然后调用requestionAnimationFrame 方法，他接受一个参数，就是动画函数。

requestAnimationFrame(animation);

执行函数后，浏览器重绘DOM， div 向右移动10px，这时就停止了。如果再次调用 这个函数，div 又向右移动10px; 也就是说每执行一个requestAnimationFrame(animation); div 就向右移动10px;

因此创建循环动画，就需要在 动画函数中调用 requestAnimationFrame(animation);

function animation(){
    var div =document.getElementById("div1");
    div.style.left = div.offsetLeft +10 +"px";
    requestAnimationFrame(animation);
}
 requestAnimationFrame(animation);  

其次 还提供了一个cancelAnimationFrame方法，它接受一个参数，用于取消动画。 参数就是 requestAnimationFrame(animation) 的返回值，和setTimeout 返回值一样。

完整的requestAnimationFrame动画。

<div id="div1">
    ddd
</div>
<script>
    var timer = null;
    var div = document.getElementById("div1");
    function animation(){
        div.style.left = div.offsetLeft + 10 + "px";
        if(div.offsetLeft > 800){
            cancelAnimationFrame(timer);
        }else {
            requestAnimationFrame(animation);
        }
    }
    timer =requestAnimationFrame(animation);
</script>