RequestAnimationFrame Fps Stabilization

RequestAnimationFrame (rAF) tornou-se predominante para animações, oferecendo uma execução suave e eficiente. No entanto, controlar a taxa de quadros (FPS) para garantir a consistência pode ser um desafio.

Ajustando o rAF para um FPS específico

Para acelerar o rAF para um FPS específico, você pode tempo de aproveitamento decorrido desde a execução do último quadro. Seu código de desenho será executado somente quando o intervalo FPS desejado tiver decorrido.

Snippet de código

Inicialize as variáveis ​​do temporizador e inicie a animação:

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

O loop rAF para desenhar no FPS especificado:

function animate() {

    requestAnimationFrame(animate);

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

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

Ao incorporar essa lógica, você pode acelerar efetivamente o rAF para atingir o FPS desejado, garantindo animações consistentes que atendam aos seus requisitos específicos.