Window.requestAnimationFrame()

在此页

句法
范例
注意事项
规范
浏览器兼容性
另请参阅
相关话题

window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.

注意： Your callback routine must itself call


							requestAnimationFrame()

if you want to animate another frame at the next repaint.

You should call this method whenever you're ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint. The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation. requestAnimationFrame() calls are paused in most browsers when running in background tabs or hidden <iframe> s in order to improve performance and battery life.

The callback method is passed a single argument, a DOMHighResTimeStamp , which indicates the current time (based on the number of milliseconds since time origin ). When callbacks queued by requestAnimationFrame() begin to fire multiple callbacks in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload. This timestamp is a decimal number, in milliseconds, but with a minimal precision of 1ms (1000 µs).

Be sure to always use the first argument (or some other method for getting the current time) to calculate how much the animation will progress in a frame, otherwise the animation will run faster on high refresh rate screens . Check the example below for a way to do this.

句法

window.requestAnimationFrame(callback);

参数

callback: The function to call when it's time to update your animation for the next repaint. The callback function is passed one single argument, a DOMHighResTimeStamp similar to the one returned by performance.now() , indicating the point in time when requestAnimationFrame() starts to execute callback functions.

返回值

A long integer value, the request id, that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value. You can pass this value to window.cancelAnimationFrame() to cancel the refresh callback request.

范例

In this example, an element is animated for 2 seconds (2000 milliseconds). The element moves at a speed of 0.1px/ms to the right, so its relative position (in CSS pixels) can be calculated in function of the time elapsed since the start of the animation (in milliseconds) with 0.1 * elapsed . The element's final position is 200px ( 0.1 * 2000 ) to the right of its initial position.

const element = document.getElementById('some-element-you-want-to-animate');
let start;
function step(timestamp) {
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;
  // `Math.min()` is used here to make sure that the element stops at exactly 200px.
  element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';
  if (elapsed < 2000) { // Stop the animation after 2 seconds
    window.requestAnimationFrame(step);
  }
}
window.requestAnimationFrame(step);

注意事项

Edge versions below 17 and Internet Explorer do not reliably fire requestAnimationFrame before the paint cycle.

规范

规范	状态	注释
HTML 实时标准 The definition of 'requestAnimationFrame' in that specification.	实时标准	No change, supersedes the previous one.
Timing control for script-based animations The definition of 'requestAnimationFrame' in that specification.	过时	初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`requestAnimationFrame`	Chrome 24 24 10 Prefixed Prefixed Implemented with the vendor prefix: webkit	Edge 12	Firefox 23 注意事项 23 注意事项 Callback parameter is a `DOMHighResTimestamp` . This means ten microsecond precision and zero time as `performance.now()` . 11 — 42 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: moz Callback parameter is a `DOMTimestamp` . This means millisecond precision and zero time as `Date.now()` . 4 — 11 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: moz Could be called with no input parameters.	IE 10	Opera 15 15 15 Prefixed Prefixed Implemented with the vendor prefix: webkit	Safari 6.1 6.1 6 Prefixed Prefixed Implemented with the vendor prefix: webkit	WebView Android ≤37 ≤37 ≤37 Prefixed Prefixed Implemented with the vendor prefix: webkit	Chrome Android 25 25 18 Prefixed Prefixed Implemented with the vendor prefix: webkit	Firefox Android 23 23 14 — 42 Prefixed Prefixed Implemented with the vendor prefix: moz	Opera Android 14 14 14 Prefixed Prefixed Implemented with the vendor prefix: webkit	Safari iOS 7 7 6.1 Prefixed Prefixed Implemented with the vendor prefix: webkit	Samsung Internet Android 1.5 1.5 1.0 Prefixed Prefixed Implemented with the vendor prefix: webkit
返回值	Chrome 23	Edge 12	Firefox 11	IE 10	Opera 15	Safari 6.1	WebView Android Yes	Chrome Android 25	Firefox Android 14	Opera Android 14	Safari iOS 6.1	Samsung Internet Android 1.5

图例

完整支持

要求使用供应商前缀或不同名称。

另请参阅

Window.mozAnimationStartTime
Window.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

元数据

最后修改： Jun 23, 2020

在此页

句法

参数

返回值

范例

注意事项

规范

浏览器兼容性

图例

另请参阅

相关话题