mozilla

Window.requestAnimationFrame()

La méthode window.requestAnimationFrame() notifie le navigateur que vous souhaitez executer une animation et demande que celui-ci execute une fonction spécifique de mise à jour de l'animation, avant le prochain repaint du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le repaint 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 à rafraichir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau repaint. En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafrachissement de votre écran, conformément aux recommandation de la W3C. Cette fréquence peut être inférieur 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'execution du repaint est prévue.

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 a appeler lorsque votre animation va être rafraichie lors du prochain repaint. Le callback ne prend qu'un seul argument, un DOMHighResTimeStamp, qui est le temps, durant lequel l'execution du repaint est prévue..

Valeur retournée

requestID est un entier long unique identifiant l'élement dans la liste du callback. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette value. En passant cette valeur en parametre de la méthode window.cancelAnimationFrame() vous annulerez 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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10.0 webkit
24.0
4.0 moz [1]
23 [2]
10.0 (Oui) -o
15.0
6.0 webkit
6.1
requestID return value 23.0 webkit
24.0
11.0 (11.0) moz 10.0 (Oui) -o
15.0
(Oui)
Feature Android BlackBerry Browser Chrome pour Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support Pas de support 10.0 webkit 16.0 webkit ? ? 14.0 7.0
6.0 webkit
requestID return value ?   ? 11.0 (11.0) moz ? ? ?

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é, n'étant 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 correct, dans Chrome, pour annuler l'execution est window.cancelAnimationFrame(). Dans les anciennes versions, window.webkitCancelAnimationFrame() & window.webkitCancelRequestAnimationFrame(), ont été dépréciées mais sont toujours supportées pour le moment.

Specification

Timing control for script-based animations: requestAnimationFrameWD

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : fscholz, juleschz, youssefj, wakooka, Huntedpix
Dernière mise à jour par : Huntedpix,
Masquer la barre latérale