diff options
Diffstat (limited to 'files/nl/web/api/window/requestanimationframe/index.html')
| -rw-r--r-- | files/nl/web/api/window/requestanimationframe/index.html | 188 |
1 files changed, 188 insertions, 0 deletions
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 +--- +<p>{{APIRef}}<br> + De <strong><code>window.requestAnimationFrame()</code></strong> 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.</p> + +<div class="note"><strong>Notitie:</strong> Uw callback routine moet zelf<code>requestAnimationFrame()</code> aanroepen als u een andere frame wilt animeren bij de volgende repaint.</div> + +<p>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. <code>requestAnimationFrame</code> 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.</p> + +<p>De callback methode krijg een enkel argument, een {{domxref("DOMHighResTimeStamp")}}, die de huidige tijd aangeeft wanneer callbacks die gequeued zijn door <code>requestAnimationFrame</code> 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).</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.requestAnimationFrame(callback); +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>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 <code>requestAnimationFrame</code> begint de callback te vuren.</dd> +</dl> + +<h3 id="Return_waarde">Return waarde</h3> + +<p>Een <code>long</code> 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.</p> + +<p>Voorbeeld:</p> + +<pre class="brush: js">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); +</pre> + +<h2 id="Specification" name="Specification">Specificatie</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Commentaar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Geen verandering, vervangt de vorige.</td> + </tr> + <tr> + <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td> + <td>{{Spec2('RequestAnimationFrame')}}</td> + <td>Initiele definitie</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic ondersteuning</td> + <td>{{CompatChrome(10)}} {{property_prefix("webkit")}}<br> + {{CompatChrome(24)}} [3]</td> + <td>4.0 {{property_prefix("moz")}} [1][4]<br> + 23 [2]</td> + <td>10.0</td> + <td>{{compatversionunknown}} {{property_prefix("-o")}}<br> + 15.0</td> + <td>6.0 {{property_prefix("webkit")}}<br> + 6.1</td> + </tr> + <tr> + <td>return waarde</td> + <td>{{CompatChrome(23)}}</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>10.0</td> + <td>15.0</td> + <td>6.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td> + <table class="compat-table"> + <tbody> + <tr> + <td>Basic ondersteuning</td> + <td> </td> + </tr> + </tbody> + </table> + </td> + <td> + <p>4.3 {{property_prefix("webkit")}}<br> + 4.4</p> + </td> + <td>4.3 {{property_prefix("webkit")}}<br> + 4.4</td> + <td> + <p>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}<br> + 23</p> + </td> + <td>10.0</td> + <td>15.0</td> + <td> + <p>6.1 {{property_prefix("webkit")}}<br> + 7.1</p> + </td> + <td>{{CompatChrome(18)}} {{property_prefix("webkit")}}{{CompatChrome(25)}} [3]</td> + </tr> + <tr> + <td><code>requestID</code> return waarde</td> + <td>4.4</td> + <td>4.4</td> + <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}</td> + <td>10.0</td> + <td>15.0</td> + <td>6.1 {{property_prefix("webkit")}}<br> + 7.1</td> + <td>{{CompatChrome(25)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[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.</p> + +<p>[2] De callback parameter is een {{domxref("DOMTimeStamp")}} in plaats van een {{domxref("DOMHighResTimeStamp")}} als de geprefixte versie van deze methode werd gebruikt. <code>DOMTimeStamp</code> heeft alleen millisecond precisie, maar <code>DOMHighResTimeStamp</code> heeft een minimale precies van tien microseconden. Verder is de nultijd anders: <code>DOMHighResTimeStamp</code> heeft dezelfde nultijd als <code>performance.now()</code>, maar DOMTimeStamp heeft dezelfde nultijd als<code>Date.now().</code></p> + +<p>[3] De correctie aanroep in Chrome op de request af te breken is op dit moment <code>window.cancelAnimationFrame()</code>. Oudere versies, <code>window.webkitCancelAnimationFrame()</code> & <code>window.webkitCancelRequestAnimationFrame()</code>, zijn afgeschaft maar worden voor nu nog steeds ondersteund.</p> + +<p>[4] Ondersteuning voor de geprefixte versie is verwijderd in Firefox 42.</p> + +<h2 id="See_also" name="See_also">Zie ook</h2> + +<ul> + <li>{{domxref("Window.mozAnimationStartTime")}}</li> + <li>{{domxref("Window.cancelAnimationFrame()")}}</li> + <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li> + <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li> + <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li> + <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li> + <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li> + <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li> +</ul> |