CSS requestAnimationFramerequestAnimationFrame的用法与setTimeout

绘制动画，一般有两个选择：

js脚本 setTimeout和setInterval
css3 transition和animation属性

这两个方法有各自的局限性：

js脚本实现动画的局限性：

即使向 setTimeout和setInterval 传递ms级的参数，由于js单线程的关系，可能会引发堵塞，不能达到高精度的准确性

没有对动画的循环机制进行优化，只是以一个大致的时间间隔循环，而且“最优帧速率”和“选择绘制下一帧的最优时机”都需要开发者自己来控制；ms设置过小，比如小于16.67ms（60帧）那么就会引起掉帧（一般显示器显示最高频率是60帧）；设置过大，帧数小，动画效果不流畅

css3实现动画的局限性

兼容性问题，对于PC浏览器，IE8, IE9之流，你想兼容实现某些动画效果，比如说淡入淡出，就无能为力了

不能应用所有属性问题，CSS3动画可以改变高宽，方位，角度，透明度等等，但是对于scrollTop，就无能无力了

CSS3支持的动画效果有限

于是，我们引入requestAnimationFrame

requestAnimationFrame会把每一帧中的dom操作集中起来，再一次重绘或者重排中就完成，并且刷新频率紧跟浏览器的刷新频率

在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量

requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

requestAnimationFrame的用法与setTimeout相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行

timerID = requestAnimationFrame(callback);

//控制台输出1和0
var timer = requestAnimationFrame(function(){
    console.log(0);
}); 
console.log(timer);//1

cancelAnimationFrame方法用于取消定时器

//控制台什么都不输出
var timer = requestAnimationFrame(function(){
    console.log(0);
}); 
cancelAnimationFrame(timer);

也可以直接使用返回值进行取消

var timer = requestAnimationFrame(function(){
    console.log(0);
}); 
cancelAnimationFrame(1);