requestAnimationFrame을 사용하여 애니메이션에서 FPS를 제어하는 ​​방법은 무엇입니까?

requestAnimationFrame으로 FPS 제어

requestAnimationFrame은 부드러운 애니메이션을 위해 선호되는 방법이 되었지만 때로는 다양한 속도로 실행될 수 있습니다. 일관된 프레임 속도를 보장하는 기술은 다음과 같습니다.

requestAnimationFrame을 특정 FPS로 제한

이 방법은 조건부 검사를 사용하여 지정된 FPS가 실행될 때만 애니메이션 코드를 실행합니다. 간격이 경과되었습니다.

구현:

1. 변수 초기화:

   • 변수 생성 정지, 프레임 수, 경과 시간, 시작 시간 및 FPS 간격.

2. 애니메이션 시작:

   • 이를 초기화합니다. 변수를 지정하고 animate() 함수를 호출하여 루프를 시작합니다.

3. 애니메이션 루프:

   • 경과 시간 계산 Date.now()를 사용한 마지막 루프 이후.
   • 경과 시간이 fpsInterval보다 크면 다음 프레임을 그립니다.
   • FPS 간격과 RAF 기본값 간의 차이를 고려하여 조정합니다. 간격.

4. 그림 코드:

   • 그림 코드를 조건부 검사 내에 배치합니다(경과된 경우 > fpsInterval). .

예제 코드:

<code class="javascript">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();
}

function animate() {
    requestAnimationFrame(animate);

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

    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);

        // Put your drawing code here
    }
}</code>

이 접근 방식을 사용하면 브라우저의 환경에 관계없이 애니메이션이 지정된 FPS에서 실행됩니다. 렌더링 속도.

위 내용은 requestAnimationFrame을 사용하여 애니메이션에서 FPS를 제어하는 ​​방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!