Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
The
window.requestAnimationFrame()
method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.
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. The callback rate may be reduced to a lower rate when running in background tabs or in 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 when callbacks queued by requestAnimationFrame
begin to fire. Multiple callbacks in a single frame, therefore, each receive 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).
Syntax
window.requestAnimationFrame(callback);
Parameters
callback
- A parameter specifying a function to call when it's time to update your animation for the next repaint. The callback has one single argument, a
DOMHighResTimeStamp
, which indicates the current time (the time returned fromPerformance.now()
) for whenrequestAnimationFrame
starts to fire callbacks.
Return value
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.
Example
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
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'requestAnimationFrame' in that specification. |
Living Standard | No change, supersedes the previous one. |
Timing control for script-based animations The definition of 'requestAnimationFrame' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
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] Prior to Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), mozRequestAnimationFrame() could be called with no input parameters. This is no longer supported, as it's not likely to become part of the standard.
[2] The callback parameter is a DOMTimeStamp
instead of a DOMHighResTimeStamp
if the prefixed version of this method was used. DOMTimeStamp
only has millisecond precision, but DOMHighResTimeStamp
has a minimal precision of ten microseconds. Furthermore, the zero time is different: DOMHighResTimeStamp
has the same zero time as performance.now()
, but DOMTimeStamp has the same zero time as Date.now().
[3] The correct call in Chrome to cancel the request is currently window.cancelAnimationFrame()
. Older versions, window.webkitCancelAnimationFrame()
& window.webkitCancelRequestAnimationFrame()
, have been deprecated but are still supported for now.
[4] Support for the prefixed version has been removed in Firefox 42.
See also
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 for Smart Animating
- Paul Irish: requestAnimationFrame API: now with sub-millisecond precision