RequestAnimationFrame Fps Stabilization

RequestAnimationFrame (rAF) est devenu répandu pour les animations, offrant une exécution fluide et efficace. Cependant, contrôler la fréquence d'images (FPS) pour garantir la cohérence peut être difficile.

Limitation de rAF à un FPS spécifique

Pour limiter rAF à un FPS spécifique, vous pouvez temps de levier écoulé depuis la dernière exécution de la trame. Votre code de dessin ne s'exécutera que lorsque l'intervalle FPS souhaité sera écoulé.

Extrait de code

Initialisez les variables de minuterie et démarrez l'animation :

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();
}

La boucle rAF pour dessiner à votre FPS spécifié :

function animate() {

    requestAnimationFrame(animate);

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

    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);
        // Your drawing code goes here
    }
}

En incorporant cette logique, vous pouvez limiter efficacement rAF pour obtenir le FPS souhaité, garantissant ainsi des animations cohérentes qui répondent à vos besoins spécifiques.