Window.requestAnimationFrame()

La méthode window.requestAnimationFrame() indique au navigateur qu'on souhaite 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 à l'écran du navigateur. Cette méthode prend comme argument une fonction de rappel qui sera appelée avant le rafraîchissement du navigateur.

Cette méthode doit être appelée dès que le code est prêt à rafraîchir l'animation. La fonction de rappel contenant l'animation sera ainsi appelée par le navigateur avant le prochain rafraîchissement. La fonction de rappel est généralement appelée 60 fois par seconde. En réalité, cette fréquence correspondra le plus souvent au taux de rafraîchissement de l'écran dans la plupart des navigateurs, d'après les recommandations du W3C. Les appels à requestAnimationFrame() sont mis en pause dans la plupart des navigateurs lors d'une exécution dans des onglets en arrière-plan ou dans des <iframe> masquées afin d'améliorer les performances et la durée de vie des batteries.

La fonction de rappel reçoit un seul argument, une valeur DOMHighResTimeStamp, qui indique le temps actuel (exprimé en nombre de millisecondes écoulées depuis l'origine temporelle). Lorsque plusieurs fonctions de rappel sont mises en attente et que requestAnimationFrame() commence à se déclencher pour une image donnée, chaque fonction reçoit le même horodatage, même si du temps s'est écoulé pendant le calcul de la fonction de rappel précédente (dans l'exemple ci-après, on anime uniquement l'image lorsque l'horodatage change, c'est-à-dire à la première fonction de rappel). Cette valeur temporelle est un nombre décimal, exprimant une valeur en millisecondes, avec une précision minimale de 1ms (1000 µs).

requestAnimationFrame(callback);

const element = document.getElementById("un-élément-à-animer");
let debut, tempsPrecedent;
let fini = false;

function iteration(chrono) {
  if (debut === undefined) {
    debut = chrono;
  }
  const ecoule = chrono - debut;

  if (tempsPrecedent !== chrono) {
    // Math.min() est utilisée ici afin de s'assurer
    // que l'élément s'arrête exactement à 200px
    const compteur = Math.min(0.1 * ecoule, 200);
    element.style.transform = `translateX(${compteur}px)`;
    if (compteur === 200) fini = true;
  }

  if (ecoule < 2000) {
    // On arrête l'animation après 2 secondes
    tempsPrecedent = chrono;
    if (!fini) {
      window.requestAnimationFrame(iteration);
    }
  }
}

window.requestAnimationFrame(iteration);