Des animations fluides et performantes sont essentielles dans les applications Web modernes. Cependant, une mauvaise gestion peut surcharger le thread principal du navigateur, entraînant de mauvaises performances et des animations saccadées. requestAnimationFrame (rAF) est une API de navigateur conçue pour synchroniser les animations avec le taux de rafraîchissement de l'écran, garantissant ainsi un mouvement plus fluide par rapport aux alternatives telles que setTimeout. Mais l'utilisation efficace de rAF nécessite une planification minutieuse, en particulier lors de la gestion de plusieurs animations.

Dans cet article, nous explorerons comment optimiser requestAnimationFrame en centralisant la gestion des animations, en introduisant le contrôle FPS et en gardant le thread principal du navigateur réactif.

Comprendre les FPS et pourquoi c'est important

Les images par seconde (FPS) sont cruciales lorsqu'il s'agit de performances d'animation. La plupart des écrans s'actualisent à 60 FPS, ce qui signifie que requestAnimationFrame est appelé 60 fois par seconde. Pour conserver des animations fluides, le navigateur doit terminer son travail en 16,67 millisecondes environ par image.

Si trop de tâches sont exécutées au cours d'une seule image, le navigateur peut manquer son temps d'image cible, provoquant des bégaiements ou des pertes d'images. Réduire le FPS pour certaines animations peut aider à réduire la charge sur le thread principal, offrant ainsi un équilibre entre performances et fluidité.

Gestionnaire d'animation centralisé avec contrôle FPS pour de meilleures performances

Pour gérer les animations plus efficacement, nous pouvons centraliser leur gestion avec une boucle partagée plutôt que d'avoir plusieurs appels requestAnimationFrame dispersés dans le code. Une approche centralisée minimise les appels redondants et facilite l'ajout d'un contrôle FPS.

La classe AnimationManager suivante nous permet d'enregistrer et de désenregistrer des tâches d'animation tout en contrôlant le FPS cible. Par défaut, nous visons 60 FPS, mais cela peut être ajusté en fonction des besoins de performances.

class AnimationManager {
  private tasks: Set = new Set();
  private fps: number = 60; // Target FPS
  private lastFrameTime: number = performance.now();
  private animationId: number | null = null; // Store the animation frame ID

  private run = (currentTime: number) => {
    const deltaTime = currentTime - this.lastFrameTime;

    // Ensure the tasks only run if enough time has passed to meet the target FPS
    if (deltaTime > 1000 / this.fps) {
      this.tasks.forEach((task) => task(currentTime));
      this.lastFrameTime = currentTime;
    }

    this.animationId = requestAnimationFrame(this.run);
  };

  public registerTask(task: FrameRequestCallback) {
    this.tasks.add(task);
    if (this.tasks.size === 1) {
      this.animationId = requestAnimationFrame(this.run); // Start the loop if this is the first task
    }
  }

  public unregisterTask(task: FrameRequestCallback) {
    this.tasks.delete(task);
    if (this.tasks.size === 0 && this.animationId !== null) {
      cancelAnimationFrame(this.animationId); // Stop the loop if no tasks remain
      this.animationId = null; // Reset the ID
    }
  }
}

export const animationManager = new AnimationManager();

Dans cette configuration, nous calculons le deltaTime entre les images pour déterminer si suffisamment de temps s'est écoulé pour la prochaine mise à jour en fonction du FPS cible. Cela nous permet de limiter la fréquence des mises à jour pour garantir que le thread principal du navigateur ne soit pas surchargé.

Exemple pratique : animer plusieurs éléments avec différentes propriétés

Créons un exemple dans lequel nous animons trois boîtes, chacune avec une animation différente : l'une est mise à l'échelle, une autre change de couleur et la troisième pivote.

Voici le code HTML :

Voici le CSS :

.animated-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: transform 0.1s ease;
}

Maintenant, nous allons ajouter JavaScript pour animer chaque boîte avec une propriété différente. L'un va évoluer, un autre va changer de couleur et le troisième va pivoter.

Étape 1 : Ajout d'une interpolation linéaire (lerp)

L'interpolation linéaire (lerp) est une technique courante utilisée dans les animations pour effectuer une transition en douceur entre deux valeurs. Il permet de créer une progression progressive et fluide, ce qui le rend idéal pour mettre à l'échelle, déplacer ou modifier des propriétés au fil du temps. La fonction prend trois paramètres : une valeur de départ, une valeur de fin et un temps normalisé (t), qui détermine la distance parcourue par la transition.

function lerp(start: number, end: number, t: number): number {
  return start   (end - start) * t;
}

Étape 2 : mise à l'échelle de l'animation

On commence par créer une fonction pour animer la mise à l'échelle de la première case :

function animateScale(
  scaleBox: HTMLDivElement,
  startScale: number,
  endScale: number,
  speed: number
) {
  let scaleT = 0;

  function scale() {
    scaleT  = speed;
    if (scaleT > 1) scaleT = 1;

    const currentScale = lerp(startScale, endScale, scaleT);
    scaleBox.style.transform = `scale(${currentScale})`;

    if (scaleT === 1) {
      animationManager.unregisterTask(scale);
    }
  }

  animationManager.registerTask(scale);
}

Étape 3 : Animation couleur

Ensuite, nous animons le changement de couleur de la deuxième case :

function animateColor(
  colorBox: HTMLDivElement,
  startColor: number,
  endColor: number,
  speed: number
) {
  let colorT = 0;

  function color() {
    colorT  = speed;
    if (colorT > 1) colorT = 1;

    const currentColor = Math.floor(lerp(startColor, endColor, colorT));
    colorBox.style.backgroundColor = `rgb(${currentColor}, 100, 100)`;

    if (colorT === 1) {
      animationManager.unregisterTask(color);
    }
  }

  animationManager.registerTask(color);
}

Étape 4 : Animation de rotation

Enfin, nous créons la fonction pour faire pivoter la troisième case :

function animateRotation(
  rotateBox: HTMLDivElement,
  startRotation: number,
  endRotation: number,
  speed: number
) {
  let rotationT = 0;

  function rotate() {
    rotationT  = speed; // Increment progress
    if (rotationT > 1) rotationT = 1;

    const currentRotation = lerp(startRotation, endRotation, rotationT);
    rotateBox.style.transform = `rotate(${currentRotation}deg)`;

    // Unregister task once the animation completes
    if (rotationT === 1) {
      animationManager.unregisterTask(rotate);
    }
  }

  animationManager.registerTask(rotate);
}

Étape 5 : Démarrage des animations

Enfin, nous pouvons démarrer les animations pour les trois cases :

// Selecting the elements
const scaleBox = document.querySelector("#animate-box-1") as HTMLDivElement;
const colorBox = document.querySelector("#animate-box-2") as HTMLDivElement;
const rotateBox = document.querySelector("#animate-box-3") as HTMLDivElement;

// Starting the animations
animateScale(scaleBox, 1, 1.5, 0.02); // Scaling animation
animateColor(colorBox, 0, 255, 0.01); // Color change animation
animateRotation(rotateBox, 360, 1, 0.005); // Rotation animation

Remarque sur le fil principal

Lors de l'utilisation de requestAnimationFrame, il est essentiel de garder à l'esprit que les animations s'exécutent sur le thread principal du navigateur. Surcharger le thread principal avec trop de tâches peut faire manquer des images d'animation au navigateur, ce qui entraîne un bégaiement. C'est pourquoi l'optimisation de vos animations avec des outils tels qu'un gestionnaire d'animation centralisé et un contrôle FPS peut vous aider à maintenir la fluidité, même avec plusieurs animations.

Conclusion

La gestion efficace des animations en JavaScript nécessite plus que la simple utilisation de requestAnimationFrame. En centralisant les animations et en contrôlant les FPS, vous pouvez garantir des animations plus fluides et plus performantes tout en gardant le fil principal réactif. Dans cet exemple, nous avons montré comment gérer plusieurs animations avec un seul AnimationManager, démontrant comment optimiser à la fois les performances et la convivialité. Bien que nous nous soyons concentrés sur le maintien d'un FPS cohérent par souci de simplicité, cette approche peut être étendue pour gérer différentes valeurs de FPS pour diverses animations, même si cela dépassait le cadre de cet article.

Référentiel Github : https://github.com/JBassx/rAF-optimization
StackBlitz : https://stackblitz.com/~/github.com/JBassx/rAF-optimization

LinkedIn : https://www.linkedin.com/in/josephciullo/