RequestAnimationFrame Fps Stabilization

RequestAnimationFrame (rAF) se ha vuelto frecuente para las animaciones, ofreciendo una ejecución fluida y eficiente. Sin embargo, controlar la velocidad de fotogramas (FPS) para garantizar la coherencia puede ser un desafío.

Acelerar rAF a un FPS específico

Para acelerar rAF a un FPS específico, puedes tiempo de apalancamiento transcurrido desde la ejecución del último cuadro. Su código de dibujo se ejecutará solo cuando haya transcurrido el intervalo de FPS deseado.

Fragmento de código

Inicializa las variables del temporizador e inicia la animación:

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

El bucle rAF para dibujar a tu FPS especificado:

function animate() {

    requestAnimationFrame(animate);

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

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

Al incorporar esta lógica, puede acelerar eficazmente rAF para lograr el FPS deseado, garantizando animaciones consistentes que cumplan con sus requisitos específicos.