window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。
requestAnimationFrame()。当你需要更新屏幕画面时就可以调用此方法。在浏览器下次重绘前执行回调函数。回调的次数通常是每秒60次，但大多数浏览器通常匹配 W3C 所建议的刷新频率。在大多数浏览器里，当运行在后台标签页或者隐藏的<iframe> 里时，requestAnimationFrame() 会暂停调用以提升性能和电池寿命。
回调函数会被传入一个参数，DOMHighResTimeStamp，指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。即使每个回调函数的工作量的计算都花了时间，单个帧中的多个回调也都将被传入相同的时间戳。该时间戳是一个十进制数，单位毫秒，最小精度为1ms(1000μs)。
语法
window.requestAnimationFrame(callback);
参数
callback- 一个指定函数的参数，该函数在下次重新绘制动画时调用。这个回调函数只有一个传参，
DOMHighResTimeStamp，指示requestAnimationFrame()开始触发回调函数的当前时间（performance.now()返回的时间）。
返回值
一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。
范例
var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';
function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
element.style.left = Math.min(progress / 10, 200) + 'px';
if (progress < 2000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);
规范
| 规范 | 状态 | 注解 |
|---|---|---|
| HTML Living Standard requestAnimationFrame |
Living Standard | 无改变，取代旧版 |
| Timing control for script-based animations requestAnimationFrame |
Candidate Recommendation | 初步定义 |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 10 webkit 24 [3] |
4.0 moz [1][4] 23 [2] |
10.0 | (Yes) -o 15.0 |
6.0 webkit 6.1 |
| return value | 23 | 11.0 (11.0) | 10.0 | 15.0 | 6.1 |
| Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
| Basic support |
4.3 webkit |
4.3 webkit 4.4 |
11.0 (11.0) moz |
10.0 | 15.0 |
6.1 webkit |
18 webkit25 [3] |
requestID return value |
4.4 | 4.4 | 11.0 (11.0) moz | 10.0 | 15.0 | 6.1 webkit 7.1 |
25 |
[1] Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8) 之前，mozRequestAnimationFrame() 可以无参调用。这已不再被支持，因为它不太可能成为标准的一部分。
[2] 若使用的是带有此前缀的版本，回调参数将是 DOMTimeStamp 而不是 DOMHighResTimeStamp 类。DOMTimeStamp 只精确到毫秒，而DOMHighResTimeStamp 最小可精确到10微秒。此外，起始时间的计算是不同的：DOMHighResTimeStamp 的起始时间与 performance.now()相同，而 DOMTimeStamp 的起始时间与 Date.now() 相同。
[3] 在 Chrome 中正确取消回调的调用目前是 window.cancelAnimationFrame()。旧版本，window.webkitCancelAnimationFrame() & window.webkitCancelRequestAnimationFrame()，已被弃用但仍被支持。
[4] Firefox 42中，对前缀版本的支持已被删除。
参阅
Window.mozAnimationStartTimeWindow.cancelAnimationFrame()- mozRequestAnimationFrame - Blog post
- requestAnimationFrame for smart animating - Blog post
- Animating with javascript: from setInterval to requestAnimationFrame - Blog post
- Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1 - Blog post
- TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations
- Paul Irish: requestAnimationFrame API: now with sub-millisecond precision