aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/window/cancelanimationframe/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/api/window/cancelanimationframe/index.html')
-rw-r--r--files/fr/web/api/window/cancelanimationframe/index.html79
1 files changed, 79 insertions, 0 deletions
diff --git a/files/fr/web/api/window/cancelanimationframe/index.html b/files/fr/web/api/window/cancelanimationframe/index.html
new file mode 100644
index 0000000000..53e22003a2
--- /dev/null
+++ b/files/fr/web/api/window/cancelanimationframe/index.html
@@ -0,0 +1,79 @@
+---
+title: window.cancelAnimationFrame()
+slug: Web/API/Window/cancelAnimationFrame
+tags:
+ - API
+ - Animation
+ - DOM
+ - Experimental
+ - Méthode
+ - Reference
+ - Window
+translation_of: Web/API/Window/cancelAnimationFrame
+---
+<div>{{APIRef}}</div>
+
+<div>La méthode <code><strong>window.cancelAnimationFrame()</strong></code> met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox" id="window.cancelAnimationFramerequestID_Paramètres">window.cancelAnimationFrame(<em>requestID</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>requestID</code></dt>
+ <dd>L'identifiant retourné par l'appel à {{domxref("window.requestAnimationFrame()")}} qui a généré la fonction de rappel (callback)</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+ window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime; // Seulement supporté par Firefox. Les autre navigateurs peuvent utiliser quelque chose comme Date.now()..
+
+var myReq; // Déclarer la variable globalement avant de lancer l'animation
+
+function step(timestamp) {
+ var progress = timestamp - start;
+ d.style.left = Math.min(progress / 10, 200) + 'px';
+ if (progress &lt; 2000) {
+ // Ne pas oublier de récupérer l'identifiant à chaque appel de la fonction
+ myReq = requestAnimationFrame(step);
+ }
+}
+myReq = requestAnimationFrame(step);
+// L'annulation utilise le dernier identifiant
+cancelAnimationFrame(myReq);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Spécification</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{spec("https://www.w3.org/TR/html51/webappapis.html#animation-frames", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Window.cancelAnimationFrame")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+</ul>