Un minuteur ne sait pas quand le navigateur est sur le point de peindre. requestAnimationFrame planifie un rappel avant une future image, ce qui le rend mieux adapté aux mises à jour visuelles telles que le déplacement d'un élément ou le dessin sur un canevas.

let frameId;
let start;

function animate(now) {
  start ??= now;
  const progress = Math.min((now - start) / 400, 1);
  element.style.transform = `translateX(${progress * 120}px)`;
  if (progress < 1) frameId = requestAnimationFrame(animate);
}

frameId = requestAnimationFrame(animate);

Utilisez l'horodatage, pas une étape fixe

  • Basez la progression sur l’horodatage de rappel afin que le mouvement ne soit pas lié à un taux de rafraîchissement particulier.
  • Gardez les lectures et les écritures de mise en page organisées pour éviter une mise en page forcée répétée.
  • Annulez une image planifiée avec CancelAnimationFrame lorsque l'animation doit s'arrêter.

Respecter la préférence de mouvement de l'utilisateur

Offrez un chemin à mouvement réduit pour les mouvements non essentiels et évitez d'animer du contenu qui peut distraire ou rendre la page inconfortable.

Testez à différentes fréquences de rafraîchissement et lorsqu'un onglet est en arrière-plan. Les navigateurs peuvent suspendre ou limiter les rappels d’animation lorsqu’une page n’est pas visible.