Window.requestAnimationFrame()

La méthode window.requestAnimationFrame() 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.

Note: Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode requestAnimationFrame().

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.

Le callback possède un seul argument, un 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.

Syntaxe

requestID = window.requestAnimationFrame(callback);       // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS)
requestID = window.mozRequestAnimationFrame(callback);    // Firefox < 23
requestID = window.webkitRequestAnimationFrame(callback); // Anciennes versions de Safari / Chrome

Paramètres

callback
Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un DOMHighResTimeStamp, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks.

Valeur retournée

requestID est un entier long 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 window.cancelAnimationFrame(),  vous annulez l'appel du callback.

Exemple

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;


var start = null;

var d = document.getElementById("SomeElementYouWantToAnimate");

function step(timestamp) {
  var progress;
  if (start === null) start = timestamp;
  progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

Compatibilités

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
requestAnimationFrameChrome Support complet 24
Support complet 24
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : webkit
Edge Support complet 12Firefox Support complet 23
Notes
Support complet 23
Notes
Notes Callback parameter is a DOMHighResTimestamp. This means ten microsecond precision and zero time as performance.now().
Aucun support 11 — 42
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : moz
Notes Callback parameter is a DOMTimestamp. This means millisecond precision and zero time as Date.now().
Aucun support 4 — 11
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : moz
Notes Could be called with no input parameters.
IE Support complet 10Opera Support complet 15
Support complet 15
Aucun support ? — 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : o
Safari Support complet 6.1
Support complet 6.1
Support complet 6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : webkit
WebView Android Support complet OuiChrome Android Support complet 25
Support complet 25
Support complet 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : webkit
Firefox Android Support complet 23
Support complet 23
Aucun support 14 — 42
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : moz
Opera Android Support complet 14
Support complet 14
Aucun support ? — 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : o
Safari iOS Support complet 7
Support complet 7
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : webkit
Samsung Internet Android Support complet 1.5
Support complet 1.5
Support complet 1.0
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : webkit
Return valueChrome Support complet 23Edge Support complet OuiFirefox Support complet 11IE Support complet 10Opera Support complet 15Safari Support complet 6.1WebView Android Support complet OuiChrome Android Support complet 25Firefox Android Support complet 14Opera Android Support complet 14Safari iOS Support complet 6.1Samsung Internet Android Support complet 1.5

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Notes pour Gecko

[1] Avant Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), mozRequestAnimationFrame() pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé.

[2] Le callback prend comme paramètre un DOMTimeStamp au lieu d'un DOMHighResTimeStamp si c'est la version préfixée qui est utilisée. DOMTimeStamp n'a qu'une précision de l'ordre de la milliseconde, mais DOMHightResTimeStamp a une précision minimale de l'ordre de 10 microsecondes.

Notes pour Chrome

La syntaxe correcte, dans Chrome, pour annuler l'exécution est window.cancelAnimationFrame(). Dans les anciennes versions, window.webkitCancelAnimationFrame() & window.webkitCancelRequestAnimationFrame() sont obsolètes mais sont toujours supportées pour le moment.

Specification

Timing control for script-based animations: requestAnimationFrameWD

Voir aussi