Animation avec `requestAnimationFrame`

requestAnimationFrame (rAF) planifie une fonction de rappel avant le prochain rafraîchissement du navigateur et synchronise l’animation avec la fréquence de rafraîchissement de l’écran (généralement 60 FPS). Contrairement à setInterval, rAF se met en pause lorsque l’onglet est masqué, ce qui économise le CPU et la batterie.

Une boucle rAF consiste à définir une fonction animate qui dessine l’image actuelle, puis appelle requestAnimationFrame(animate) pour planifier la suivante. Le navigateur appelle animate avant chaque rafraîchissement, créant une animation continue à la fréquence d’images de l’écran.

rAF transmet à la fonction de rappel un horodatage haute résolution du DOM (en millisecondes depuis le chargement de la page). Utilisez-le pour calculer un mouvement indépendant de la fréquence d’images : delta = timestamp - lastTimestamp. Multipliez la vitesse par delta pour parcourir la même distance par seconde, quelle que soit la fréquence d’images.

Calculez le temps écoulé depuis la dernière image et adaptez le déplacement en conséquence. Un objet se déplaçant à 100 px/s parcourt 100 * (delta / 1000) pixels par image. Cela garantit une physique cohérente sur des écrans à 30 FPS comme à 144 FPS.

rAF renvoie un identifiant. Annulez-le avec cancelAnimationFrame(handle). Stockez l’identifiant dans une variable, vérifiez un indicateur d’exécution dans la boucle ou annulez-le lors du nettoyage du composant. Annulez toujours les boucles lorsque l’élément est supprimé du DOM.

À chaque image : (1) effacez tout le canevas avec clearRect, (2) mettez à jour les variables d’état (position, angle, temps), (3) dessinez tous les objets à leurs nouvelles positions, (4) appelez requestAnimationFrame pour l’image suivante. N’omettez jamais clearRect : les anciennes images s’accumulent et forment une traînée.

Utilisez les transitions et animations CSS pour les animations simples fondées sur des propriétés (effets au survol, apparition d’une fenêtre modale). Utilisez rAF pour les animations complexes et interactives — boucles de jeu, simulations physiques, rendu sur canevas — lorsque vous avez besoin d’un contrôle précis sur chaque image.

Pour les scènes complexes, dessinez d’abord sur un canevas hors écran, puis utilisez drawImage pour le dessiner sur le canevas visible en une seule opération. Cela évite les scintillements, car une image partiellement dessinée n’est jamais affichée : le canevas visible est mis à jour de manière atomique à chaque image.

Limitez la fréquence à une valeur inférieure (par exemple, 30 FPS) : vérifiez si suffisamment de temps s’est écoulé depuis le dernier dessin avant d’effectuer le rendu. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. Planifiez tout de même rAF pour conserver la réactivité.

Le panneau Performances de Chrome DevTools enregistre les fonctions de rappel rAF dans le graphique en flammes JS. Recherchez les fonctions de rappel longues qui dépassent 16 ms : elles provoquent des pertes d’images. Utilisez le compteur FPS (Rendu → Compteur FPS) pour observer la fréquence d’images en temps réel pendant l’interaction.

Pour des animations déclaratives plus simples, sans gestion manuelle du temps : element.animate(keyframes, options). WAAPI gère les fonctions temporelles, les modes de remplissage et les itérations, déléguant au navigateur le calcul des images. Utilisez rAF pour la logique de rendu personnalisée que WAAPI ne peut pas exprimer.

Pourquoi faut-il multiplier la vitesse d’animation par le temps delta dans une boucle requestAnimationFrame ?

requestAnimationFrame synchronise les animations JavaScript avec la fréquence de rafraîchissement de l’écran et se met en pause dans les onglets masqués. Le paramètre d’horodatage permet un mouvement indépendant de la fréquence d’images grâce à l’adaptation au temps delta. Le modèle de boucle d’animation sur canevas (effacer, mettre à jour, dessiner, planifier), associé à cancelAnimationFrame pour le nettoyage, constitue la base d’animations web fluides et efficaces.