RequestAnimationFrame Fps 안정화

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

지정된 FPS에서 그리기 위한 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를 달성하고 특정 요구 사항을 충족하는 일관된 애니메이션을 보장할 수 있습니다.