Стабилизация кадров в секунду RequestAnimationFrame

RequestAnimationFrame (rAF) стал преобладающим средством для анимации, обеспечивая плавное и эффективное выполнение. Однако контролировать частоту кадров (FPS) для обеспечения согласованности может быть непросто.

Регулирование rAF до определенного значения FPS

Чтобы ограничить rAF до определенного значения FPS, вы можете время кредитного плеча, прошедшее с момента выполнения последнего кадра. Ваш код рисования будет выполняться только по истечении желаемого интервала FPS.

Фрагмент кода

Инициализируйте переменные таймера и запустите анимацию:

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

Цикл rAF для рисования с заданной частотой кадров:

function animate() {

    requestAnimationFrame(animate);

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

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

Включив эту логику, вы можете эффективно регулировать RAF для достижения желаемого FPS, обеспечивая согласованность анимации, отвечающую вашим конкретным требованиям.