window.requestAnimationFrame()

window.requestAnimationFrame()方法用于告诉浏览器，你想在浏览器的下个重绘（repaint）之前来执行一个动画或者执行浏览器通过调用一个特定的函数来更新动画的请求。该方法会在下次重回之前执行一个作为参数的回调函数。

注意：如果你想在下次重绘的时候激活另一帧，你就要在你的程序中自己调用requestAnimationFrame()方法。

不论在什么时候，如果你已经准备好了更新你屏幕上的动画你都应该调用这个方法。这会在浏览器的下次重绘之前调用你的动画函数。执行回调函数的频率一般是60次/s，但在大多数的浏览器中通常也会按照W3C推荐的屏体刷新频率标准来匹配。当某个页面的tab不可见的时候，回调函数的执行频率也会有所下降。

回调函数会被传第一个唯一的参数，一个DOMHighResTimeStamp参数,用于标记被requestAnimationFrame加入要队列准备执行的时间。因为在一帧中会执行很多回调，因此，尽管在计算前一个回调的工作负载的时候时间已经有所流失，但是每一个毁掉还是被传递进了相同的时间戳。时间戳是一个十进制小数，用毫秒来表示，但是有最小10µs的精度。

语法

requestID = window.requestAnimationFrame(callback);       // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS)
requestID = window.mozRequestAnimationFrame(callback);    // Firefox < 23
requestID = window.webkitRequestAnimationFrame(callback); // Older versions of Safari / Chrome

参数

回调函数

在下一帧的重绘的时候会制定一个回调函数作为参数来更新你的动画。回调函数有一个参数，一个DOMHighResTimeStamp，它指明了requestAnimationFrame对回调函数进行调用的时间。

返回值

requestID是一个长整型值，唯一的标志了回调列表中的条目。这是一个非零值，但是你不用担心这个值其他的信息。你可以将这个值作为参数传递进window.cancelAnimationFrame()函数来取消对回调函数更新的请求。

例子

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;


var start = null;

var d = document.getElementById("SomeElementYouWantToAnimate");

function step(timestamp) {
  var progress;
  if (start === null) start = timestamp;
  progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

各浏览器对比

DeskTop：

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	10.0 webkit 24.0	4.0 moz [1] 23 [2]	10.0	(Yes) -o 15.0	6.0 webkit 6.1
requestID return value	23.0 webkit 24.0	11.0 (11.0) moz	10.0	(Yes) -o 15.0	(Yes)

mobile：

Feature	Android	BlackBerry Browser	Chrome for Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	Not supported	10.0 webkit	16.0 webkit	?	?	14.0	7.0 6.0 webkit
requestID return value	?		?	11.0 (11.0) moz	?	?	?

Gecko内核的浏览器注意事项

[1]在 Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8)之前的版本，mozRequestAnimationFrame()可以再没有参数的情况下运行，现在这个功能已经不再被支持，因为它也不会成为标准的一部分。

[2]在之前的版本，回调的参数是一个DOMTimeStamp而不是DOMHighResTimeStamp。DOMTimeStamp只有毫秒级别的精度，但DOMHighResTimeStamp有最小10微秒的精度。

Chrome浏览器注意事项

在Chrome里面取消调用的正确方法是 window.cancelAnimationFrame()。较老版本的API，window.webkitCancelAnimationFrame() & window.webkitCancelRequestAnimationFrame()已经被弃用，但是为了往前兼容现在还支持这两个API。