requestAnimationFrame

 requestAnimationFrame 是浏览器用于定时循环操作的一个接口，类似于 setTimeout ，主要用途是按帧对网页进行重绘。

设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。代码中使用这个API，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。

 requestAnimationFrame 的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次， requestAnimationFrame 的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。

不过有一点需要注意， requestAnimationFrame 是在主线程上完成。这意味着，如果主线程非常繁忙， requestAnimationFrame 的动画效果会大打折扣。

 requestAnimationFrame 使用一个回调函数作为参数。这个回调函数会在浏览器重绘之前调用。

requestID = window.requestAnimationFrame(callback);       

目前，主要浏览器Firefox 23 / IE 10 / Chrome / Safari）都支持这个方法。可以用下面的方法，检查浏览器是否支持这个API。如果不支持，则自行模拟部署该方法。

1  window.requestAnimFrame = (function(){
 2       return  window.requestAnimationFrame       || 
 3               window.webkitRequestAnimationFrame || 
 4               window.mozRequestAnimationFrame    || 
 5               window.oRequestAnimationFrame      || 
 6               window.msRequestAnimationFrame     || 
 7               function( callback ){
 8                 window.setTimeout(callback, 1000 / 60);
 9               };
10  })();      

上面的代码按照1秒钟60次（大约每16.7毫秒一次），来模拟 requestAnimationFrame 。

使用 requestAnimationFrame 的时候，只需反复调用它即可。

1 function repeatOften() {
2   // Do whatever
3   requestAnimationFrame(repeatOften);
4 }
5 
6 requestAnimationFrame(repeatOften);      

cancelAnimationFrame方法

 cancelAnimationFrame 方法用于取消重绘。

window.cancelAnimationFrame(requestID);      

它的参数是requestAnimationFrame返回的一个代表任务ID的整数值。

1 var globalID;
 2 
 3 function repeatOften() {
 4   $("<div />").appendTo("body");
 5   globalID = requestAnimationFrame(repeatOften);
 6 }
 7 
 8 $("#start").on("click", function() {
 9   globalID = requestAnimationFrame(repeatOften);
10 });
11 
12 $("#stop").on("click", function() {
13   cancelAnimationFrame(globalID);
14 });      

上面代码持续在body元素下添加div元素，直到用户点击stop按钮为止。

实例

下面，举一个实例。

假定网页中有一个动画区块。

<div id="anim">点击运行动画</div>      

然后，定义动画效果。

1 var elem = document.getElementById("anim");
 2 
 3 var startTime = undefined;
 4  
 5 function render(time) {
 6  
 7   if (time === undefined)
 8     time = Date.now();
 9   if (startTime === undefined)
10     startTime = time;
11  
12   elem.style.left = ((time - startTime)/10 % 500) + "px";
13 }      

最后，定义click事件。

1 elem.onclick = function() {
2 
3     (function animloop(){
4       render();
5       requestAnimFrame(animloop);
6     })();
7 
8 };      

原文地址：https://javascript.ruanyifeng.com/htmlapi/requestanimationframe.html