window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。

注意:若您想要在下次重绘时产生另一个动画画面,您的回调例程必须调用 requestAnimationFrame()

当你准备好更新屏幕画面时你就应用此方法。这会要求你的动画函数在浏览器下次重绘前执行。回调的次数常是每秒60次,但大多数浏览器通常匹配 W3C 所建议的刷新率。如果网页于后台或隐藏在 <iframe> 里面,重绘频率可能会大大降低以提升性能和电池耐久度。

回调函数只会被传入一个参数,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);

规范

Specification Status Comment
HTML Living Standard
requestAnimationFrame
Living Standard No change, supersedes the previous one.
Timing control for script-based animations
requestAnimationFrame
Candidate Recommendation Initial definition

浏览器兼容性

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 被删除。

参阅

文档标签和贡献者

 最后编辑者: PaperFlu,