window.requestAnimationFrame()


De window.requestAnimationFrame() methode vertelt de browser dat je een animatie wilt uitvoeren en vereist dat de browser een gespecificeerde functie aanroept om een animatie bij te werken voor de volgende repaint. De methode neemt een argument als een callback die aangeroepen wordt voor de repaint.
Notitie: Uw callback routine moet zelfrequestAnimationFrame() aanroepen als u een andere frame wilt animeren bij de volgende repaint.

Je dient deze methode aan te roepen wanneer je klaar bent om de animatie op het scherm bij te werken. Deze zal de browser vragen om je animatie functie aan te roepen voor de browser de volgende repaint uitvoert. Het aantal callbacks is meestal 60 keer per seconde, maar zal over het algemeen dezelfde display refresh rate zijn als in de meeste websites, volgens W3C aanbevelingen. requestAnimationFrame callbacks worden in de meeste browsers gepauzeerd wanneer deze plaatsvinden vanuit een inactief tabblad of vanuit een verborgen <iframe>, om de performance en batterijduur te verbeteren.

De callback methode krijg een enkel argument, een DOMHighResTimeStamp, die de huidige tijd aangeeft wanneer callbacks die gequeued zijn door requestAnimationFrame beginnen te vuren. Meerdere callbacks in een enkel frame krijgen daarom ieder dezelfde timestamp, ondanks de verstreken tijd tijdens de berekening van elke vorige callback. De timestamp is een decimaal nummer, in miliseconden, maar met een minimale precisie van 1ms (1000 µs).

Syntax

window.requestAnimationFrame(callback);

Parameters

callback
Een parameter die een functie om aan te roepen specificeert wanneer het tijd is om uw animatie bij te werken voor de volgende repaint. De callback heeft een enkel argument, een DOMHighResTimeStamp, die aangeeft wat de huidige tijd (de tijd die performance.now() teruggeeft) is voor wanneer requestAnimationFrame begint de callback te vuren.

Return waarde

Een long integer waarde, de request id, die de entry in de callback lijst uniek identificeert. Dit is een non-nul waarde, maar u mag geen andere aannames maken over zijn waarden. U kunt deze waarde aan window.cancelAnimationFrame() geven om het ververs callback verzoek af te breken.

Voorbeeld:

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);

Specificatie

Specificatie Status Commentaar
HTML Living Standard
The definition of 'requestAnimationFrame' in that specification.
Living Standard Geen verandering, vervangt de vorige.
Timing control for script-based animations
The definition of 'requestAnimationFrame' in that specification.
Obsolete Initiele definitie

Browser compatibiliteit

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 ondersteuning 10 webkit
24 [3]
4.0 moz [1][4]
23 [2]
10.0 (Yes) -o
15.0
6.0 webkit
6.1
return waarde 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 ondersteuning  

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 waarde 4.4 4.4 11.0 (11.0) moz 10.0 15.0 6.1 webkit
7.1
25

[1] Voor Gecko 11.0 kon (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), mozRequestAnimationFrame() aangeroepen worden zonder input parameters. Dit wordt niet langer ondersteund, omdat het waarschijnlijk geen onderdeel van de standaard wordt.

[2] De callback parameter is een DOMTimeStamp in plaats van een DOMHighResTimeStamp als de geprefixte versie van deze methode werd gebruikt. DOMTimeStamp heeft alleen millisecond precisie, maar DOMHighResTimeStamp heeft een minimale precies van tien microseconden. Verder is de nultijd anders: DOMHighResTimeStamp heeft dezelfde nultijd als performance.now(), maar DOMTimeStamp heeft dezelfde nultijd alsDate.now().

[3] De correctie aanroep in Chrome op de request af te breken is op dit moment window.cancelAnimationFrame(). Oudere versies, window.webkitCancelAnimationFrame() & window.webkitCancelRequestAnimationFrame(), zijn afgeschaft maar worden voor nu nog steeds ondersteund.

[4] Ondersteuning voor de geprefixte versie is verwijderd in Firefox 42.

Zie ook