Comment contrôler les FPS dans les animations à l'aide de requestAnimationFrame ?

Contrôler les FPS avec requestAnimationFrame

requestAnimationFrame est devenue la méthode préférée pour des animations fluides, mais elle peut parfois s'exécuter à des vitesses variables. Voici une technique pour garantir une fréquence d'images cohérente :

Limiter requestAnimationFrame à un FPS spécifique

Cette méthode utilise une vérification conditionnelle pour exécuter le code d'animation uniquement lorsqu'un FPS spécifié l'intervalle s'est écoulé.

Mise en œuvre :

1. Initialiser les variables :

   • Créer des variables pour l'arrêt, le nombre d'images, le temps écoulé, l'heure de début et l'intervalle FPS.

2. Démarrer l'animation :

   • Initialisez-les variables et invoquez la fonction animate() pour démarrer la boucle.

3. Boucle d'animation :

   • Calculez le temps écoulé depuis la dernière boucle en utilisant Date.now().
   • Si le temps écoulé est supérieur à l'intervalle fps, dessinez l'image suivante.
   • Ajustez ensuite pour tenir compte de la différence entre l'intervalle FPS et la valeur par défaut du RAF. intervalle.

4. Code de dessin :

   • Placez votre code de dessin dans la vérification conditionnelle (si écoulé > fpsInterval) .

Exemple de code :

<code class="javascript">var stop = false;
var frameCount = 0;
var fps, fpsInterval, startTime, now, then, elapsed;

function startAnimating(fps) {
    fpsInterval = 1000 / fps;
    then = Date.now();
    startTime = then;
    animate();
}

function animate() {
    requestAnimationFrame(animate);

    now = Date.now();
    elapsed = now - then;

    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);

        // Put your drawing code here
    }
}</code>

Cette approche garantit que l'animation s'exécute au FPS spécifié, quel que soit le navigateur. vitesse de rendu.

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!