diff options
Diffstat (limited to 'files/fr/web/api/window/requestanimationframe/index.html')
| -rw-r--r-- | files/fr/web/api/window/requestanimationframe/index.html | 20 |
1 files changed, 11 insertions, 9 deletions
diff --git a/files/fr/web/api/window/requestanimationframe/index.html b/files/fr/web/api/window/requestanimationframe/index.html index 8bdb9c1f89..210fa93d1a 100644 --- a/files/fr/web/api/window/requestanimationframe/index.html +++ b/files/fr/web/api/window/requestanimationframe/index.html @@ -11,20 +11,22 @@ translation_of: Web/API/window/requestAnimationFrame <p>La méthode <strong><code>window.requestAnimationFrame()</code></strong> notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur.</p> -<div class="note"><strong>Note:</strong> Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode <code>requestAnimationFrame()</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode <code>requestAnimationFrame()</code>.</p> +</div> <p>Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément.</p> <p>Le callback possède un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps, en millisecondes avec une précision minimum de 10 µs, durant lequel l'exécution du rafraîchissement est prévu.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="brush: js"><em>requestID</em> = window.requestAnimationFrame(<em>callback</em>); // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS) <em>requestID</em> = window.mozRequestAnimationFrame(<em>callback</em>); // Firefox < 23 <em>requestID</em> = window.webkitRequestAnimationFrame(callback); // Anciennes versions de Safari / Chrome </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <dl> <dt><code>callback</code></dt> @@ -35,7 +37,7 @@ translation_of: Web/API/window/requestAnimationFrame <p><code>requestID</code> est un entier <code>long</code> unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}}, vous annulez l'appel du callback.</p> -<h2 id="Notes" name="Notes">Exemple</h2> +<h2 id="Notes">Exemple</h2> <pre class="brush: js">window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; @@ -58,15 +60,15 @@ function step(timestamp) { requestAnimationFrame(step); </pre> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilités</h2> +<h2 id="Browser_compatibility">Compatibilités</h2> <div> <p>{{Compat("api.Window.requestAnimationFrame")}}</p> </div> -<h3 id="Specification" name="Specification">Notes pour Gecko</h3> +<h3 id="Specification">Notes pour Gecko</h3> -<p>[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, <code>mozRequestAnimationFrame()</code> pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas <span class="short_text" id="result_box" lang="fr"><span class="hps">susceptible</span></span> d'être standardisé.</p> +<p>[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, <code>mozRequestAnimationFrame()</code> pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé.</p> <p>[2] Le callback prend comme paramètre un {{domxref("DOMTimeStamp")}} au lieu d'un {{domxref("DOMHighResTimeStamp")}} si c'est la version préfixée qui est utilisée. <code>DOMTimeStamp</code> n'a qu'une précision de l'ordre de la milliseconde, mais <code>DOMHightResTimeStamp</code> a une précision minimale de l'ordre de 10 microsecondes.</p> @@ -74,7 +76,7 @@ requestAnimationFrame(step); <p>La syntaxe correcte, dans Chrome, pour annuler l'exécution est<code> window.cancelAnimationFrame()</code>. Dans les anciennes versions, <code>window.webkitCancelAnimationFrame()</code> & <code>window.webkitCancelRequestAnimationFrame() sont obsolètes</code> mais sont toujours supportées pour le moment.</p> -<h2 id="Specification" name="Specification">Specification</h2> +<h2 id="Specification">Specification</h2> <p>{{spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD")}}</p> @@ -87,5 +89,5 @@ requestAnimationFrame(step); <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><a href="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li> </ul> |