requestAnimationFrame

Definition

API qui planifie un callback avant le prochain repaint du navigateur (~60fps). Synchronise les animations avec le cycle de rendu pour des animations fluides.

Analogie

Attendre le signal du metronome avant de jouer la note suivante : tout reste synchronise avec le rythme d'affichage.

Exemple de code

function animate(timestamp) {
  element.style.transform =
    `translateX(${timestamp / 10}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Cas d'usage

Animations JS fluides, canvas rendering, synchronisation avec le cycle de repaint.

Anti-pattern

Termes lies