Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.


De window.requestAnimationFrame() methode vertelt de browser dat je een animatie wilt uitvoeren en verzoekt dat de browser een gespecificeerde functie aanroept om een animatie te updaten 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.

U zou deze methode moeten aanroepen wanneer u klaar bent om de animatie op het scherm te updaten. Dit zal verzoeken dat uw animatie functie aangeroepen wordt voor de browser de volgende repaint uitvoert. Het aantal callbacks is meestal 60 keer per seconde, maar zal over het algemeen de display refresh rate in de meeste websites zijn als volgens W3C aanbevelingen. Het aantal callback kan verminderd worden als er in achtergrond tabbladen of in verborgen <iframe>s om de performance en batterij leven te verbeteren.

De callback methode krijg een enkel argument, een DOMHighResTimeStamp, die de huidige tijd aangeeft wanneer callbacks die queued zijn door requestAnimationFrame beginnen af te voerne. Meerdere callback in een enkel frame krijgen daarom ieder dezelfde timestamp ook al heeft tijd gepasseerd tijdens de berekening van elke vorige callback's werklading. De timestamp is een decimaal nummer, in milliseconden, maar met een minimale precisie van  1ms (1000 µs).

Syntax

window.requestAnimationFrame(callback);

Parameters

callback
Een parameter die een functie om aan te roepen specificeerd wanneer het tijd is om uw animatie te updaten voor de volgende repaint. De callback heeft een enkele argument, een DOMHighResTimeStamp, die aangeeft wat de huidige tijd (de tijd die performance.now() teruggeeft) is voor wanneer requestAnimationFrame begint met callback af 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.
Candidate Recommendation Initiele definitie

Browser compatibiliteit

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

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: tdelang
 Laatst bijgewerkt door: tdelang,