Comment puis-je contrôler les FPS dans les animations Web à l'aide de requestAnimationFrame ?

Réguler les FPS avec requestAnimationFrame

Dans le monde de l'animation Web, requestAnimationFrame (rAF) règne en maître, offrant une fluidité et une optimisation inégalées. Cependant, les utilisateurs peuvent rencontrer des scénarios dans lesquels les animations présentent des fréquences d'images incohérentes. Pour résoudre ce problème, explorons les méthodes permettant de contrôler le FPS avec rAF.

Comme son nom l'indique, rAF est principalement destiné aux animations fluides. Le verrouiller sur un FPS spécifique pourrait potentiellement introduire des saccades. Pourtant, il existe des techniques pour obtenir cet effet.

Une approche consiste à tirer parti de la limitation basée sur le temps. Nous pouvons calculer le temps écoulé depuis la dernière image d'animation et déclencher le processus de dessin uniquement lorsqu'un intervalle FPS spécifié s'est écoulé.

<code class="javascript">var fpsInterval = 1000 / fps;

function animate() {
  now = Date.now();
  elapsed = now - then;

  if (elapsed > fpsInterval) {
    // Calculate next frame using adjusted interval
    then = now - (elapsed % fpsInterval);

    // Insert drawing code here
  }
  requestAnimationFrame(animate);
}</code>

Cette méthode garantit que le dessin ne se produit qu'au FPS souhaité, en maintenant la cohérence et en empêchant variations drastiques de la vitesse d'animation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!