캔버스에 애니메이션을 구현하고 싶습니다. 애니메이션의 각 프레임을 Sprite에 그려서 하나의 그림으로 연결합니다. 애니메이션을 구현하기 위해 setTimeout을 사용해 보았지만, requestAnimationFrame에서는 프레임 속도를 제어할 수 없습니다. 1초에 7프레임을 그리려면 어떻게 해야 하나요?
requestAnimationFrame은 브라우저가 다음 프레임을 렌더링할 때 호출되므로 requestAnimationFrame의 호출 속도는 브라우저의 새로 고침 빈도(일반적으로 60프레임)라고 간주할 수 있습니다
그러나 requestAnimationFrame이 콜백을 호출하면 타임스탬프 매개변수가 전달됩니다. 이 매개변수를 기반으로 판단하여 실제로 필요한 프레임 속도를 처리할 수 있습니다
예를 들어 초당 7프레임을 원한다면 이렇게 쓰면 됩니다
제어할 수 없는 것 같지만 브라우저가 스스로 계산합니다
1s7 프레임의 새로 고침 빈도는...본질적으로 "프레임 건너뛰기" 효과입니다...
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
requestAnimationFrame은 브라우저가 다음 프레임을 렌더링할 때 호출되므로 requestAnimationFrame의 호출 속도는 브라우저의 새로 고침 빈도(일반적으로 60프레임)라고 간주할 수 있습니다
그러나 requestAnimationFrame이 콜백을 호출하면 타임스탬프 매개변수가 전달됩니다. 이 매개변수를 기반으로 판단하여 실제로 필요한 프레임 속도를 처리할 수 있습니다
예를 들어 초당 7프레임을 원한다면 이렇게 쓰면 됩니다
으아아아제어할 수 없는 것 같지만 브라우저가 스스로 계산합니다
1s7 프레임의 새로 고침 빈도는...본질적으로 "프레임 건너뛰기" 효과입니다...