Comment limiter requestAnimationFrame à une fréquence d’images spécifique ?

Limitation de requestAnimationFrame à une fréquence d'images spécifique

requestAnimationFrame est devenue la méthode préférée pour les animations en raison de sa fluidité et de son optimisation. Cependant, il existe des situations dans lesquelles le contrôle de la vitesse d'animation est souhaité. Cet article explique comment limiter requestAnimationFrame à une fréquence d'images spécifique, garantissant une vitesse d'animation constante quelles que soient les performances de l'appareil.

Une approche de la limitation consiste à calculer le temps écoulé depuis la dernière boucle d'image et à ne dessiner que lorsque le FPS spécifié l’intervalle est écoulé. Cette méthode implique de définir des variables pour suivre les intervalles de temps.

<code class="javascript">var fpsInterval = 1000 / fps; // Convert FPS to milliseconds
var then = Date.now(); // Start time of the current animation loop</code>

La boucle d'animation est implémentée à l'aide de requestAnimationFrame et appelée en continu. Dans la boucle, le temps écoulé depuis la dernière boucle est calculé et le dessin est effectué uniquement lorsque l'intervalle FPS spécifié est écoulé.

<code class="javascript">function animate() {
    requestAnimationFrame(animate);
    now = Date.now();
    elapsed = now - then;
    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval); // Adjust for non-multiple FPS intervals
        // Put your drawing code here
    }
}</code>

En utilisant cette technique de limitation, le code de dessin est exécuté à l'heure spécifiée. FPS, offrant une vitesse d'animation constante même sur des appareils dotés de capacités de performances variables.

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!