requestAnimationFrame API 주사율 동기화 하기

이전에도 requestAnimationFrame API를 사용하여 주사율을 동기화한 적이 있지만, 그 당시에는 시간을 측정해 렌더링 스케줄에 이벤트를 등록하지 않는 방식으로 진행했다. 이번에는 이전의 방식과 달리, 모든 이벤트를 렌더링 스케줄에 등록하되, 모든 주사율에서 속도를 일정하게 유지하고 싶었다.

 

이전 방식에서는 렌더링 스케줄에 이벤트를 등록하지 않다 보니, 높은 주사율을 가진 모니터에서도 60 FPS 애니메이션을 보게 되는 한계가 있었다. 이러한 문제를 해결하기 위해, 이번 구현에서는 각 프레임에서 걸린 시간을 기반으로 속도를 조정함으로써 다양한 주사율에서도 일관된 애니메이션 속도를 제공할 수 있도록 하였다.

주사율 동기화 구현

• drawCanvas 함수 내에서 timestamp를 받아와 각 프레임 간의 시간 차이를 계산하여 속도를 조절한다.
• timestamp를 이용해 현재 프레임의 시간과 이전 프레임의 시간을 비교하여 diffTime를 계산한다. 이 값을 통해 도라에몽의 속도를 FPS에 맞춰 조정한다.

let lastTime;

const drawCanvas = (timestamp) => {
    // 처음 호출시 timestamp는 undefined가 나옴
    if (timestamp) {
        if (!lastTime) lastTime = timestamp;
        const diffTime = timestamp - lastTime; // 현재 시간과 마지막 시간의 차이 계산
        
        // 주사율이 60hz 보다 높으면 1 미만, 낮으면 1 초과
        const speedFactor = diffTime / (1000 / 60); // 60 FPS 기준 속도 조정
        
        posRef.current.x += dirRef.current.x * SPEED_LEVELS[levelRef.current] * speedFactor;
        posRef.current.y += dirRef.current.y * SPEED_LEVELS[levelRef.current] * speedFactor;

        lastTime = timestamp; // 현재 시간을 마지막 시간으로 업데이트
    }
    animationFrameId = requestAnimationFrame(drawCanvas);
};

https://find-doraemon.vercel.app/

도라에몽 찾기