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.4

4.3 webkit
4.4

11.0 (11.0) moz
23

10.0 15.0

6.1 webkit
7.1

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中,对前缀版本的支持已被删除。

参阅

文档标签和贡献者

 最后编辑者: luoway,