From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../api/window/requestanimationframe/index.html | 188 +++++++++++++++++++++ 1 file changed, 188 insertions(+) create mode 100644 files/nl/web/api/window/requestanimationframe/index.html (limited to 'files/nl/web/api/window/requestanimationframe/index.html') diff --git a/files/nl/web/api/window/requestanimationframe/index.html b/files/nl/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..061f620c28 --- /dev/null +++ b/files/nl/web/api/window/requestanimationframe/index.html @@ -0,0 +1,188 @@ +--- +title: window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +translation_of: Web/API/window/requestAnimationFrame +--- +

{{APIRef}}
+ 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 {{ HTMLElement("iframe") }}, om de performance en batterijduur te verbeteren.

+ +

De callback methode krijg een enkel argument, een {{domxref("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 {{domxref("DOMHighResTimeStamp")}}, die aangeeft wat de huidige tijd (de tijd die {{domxref('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 {{domxref("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

+ + + + + + + + + + + + + + + + + + + + + +
SpecificatieStatusCommentaar
{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}{{Spec2('HTML WHATWG')}}Geen verandering, vervangt de vorige.
{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}{{Spec2('RequestAnimationFrame')}}Initiele definitie
+ +

Browser compatibiliteit

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic ondersteuning{{CompatChrome(10)}} {{property_prefix("webkit")}}
+ {{CompatChrome(24)}} [3]		4.0 {{property_prefix("moz")}} [1][4]
+ 23 [2]		10.0{{compatversionunknown}} {{property_prefix("-o")}}
+ 15.0		6.0 {{property_prefix("webkit")}}
+ 6.1
return waarde{{CompatChrome(23)}}{{CompatGeckoDesktop("11.0")}}10.015.06.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
+ + + + + + + +
Basic ondersteuning 
+ 		+

4.3 {{property_prefix("webkit")}}
+ 4.4

+ 		4.3 {{property_prefix("webkit")}}
+ 4.4		 +

{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}
+ 23

+ 		10.015.0 +

6.1 {{property_prefix("webkit")}}
+ 7.1

+ 		{{CompatChrome(18)}} {{property_prefix("webkit")}}{{CompatChrome(25)}} [3]
requestID return waarde4.44.4{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}10.015.06.1 {{property_prefix("webkit")}}
+ 7.1		{{CompatChrome(25)}}
+
+ +

[1] Voor Gecko 11.0 kon {{geckoRelease("11.0")}}, 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 {{domxref("DOMTimeStamp")}} in plaats van een {{domxref("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

+ + -- cgit v1.2.3-54-g00ecf