FPS를 설정하고 requestAnimationFrame()으로 애니메이션을 토글합니다.

나만의 애니메이션을 만들고 JS로 토글할 수 있다는 것을 알고 계셨나요?

이 기사에서는 애니메이션을 제어할 수 있는 방법을 보여주는 작은 코드펜을 공유하고 싶습니다. 애니메이션을 적용할 개체는 HTML 캔버스의 작은 그림입니다. 수동으로 애니메이션을 적용하는 도구는 requestAnimationFrame method 입니다. 이 함수는 모니터 재생 빈도와 일치하는 초당 x번마다 콜백 함수를 실행합니다. 이 메서드는 애니메이션을 중지하는 데 사용할 수 있는 ID를 반환합니다.

const animationId = window.requestAnimationFrame(animate);
// ...
window.cancelAnimationFrame(animationId);

한 가지 알아야 할 중요한 사항은 콜백 함수 내에서 requestAnimationFrame 메서드를 호출해야 한다는 것입니다. 그러나 이것이 기본적으로 자신만의 애니메이션을 만드는 방법에 대한 모든 마법입니다.
애니메이션에 사용자 지정 초당 프레임 수를 사용하려는 경우 간단한 솔루션이 있습니다. 마지막 애니메이션 이후 충분한 시간이 경과한 경우에만 requestAnimationFrame을 호출해야 합니다.

여기에 충분한 이론이 작동하는 것을 볼 수 있는 코드펜이 있습니다.



애니메이션은 캔버스에 원 안에 선을 그리고 선이 원의 3/4에 도달하면 멈춥니다. 설정에서 애니메이션도 특정 FPS 수로 설정됩니다.

10, 30 및 60 FPS의 예:







FPS의 경과 시간을 측정하는 방법에는 여러 가지가 있습니다. 예를 들어 performance api을 사용하거나 requestAnimationFrame 함수의 전달된 타임스탬프를 사용할 수 있습니다. 나는 지금까지 최고가 아닌 간단한 솔루션을 사용했습니다.

크리에이티브 코딩 워크벤치

이 기사는 Digital Ocean Hackathon 프로젝트 'Creative Coding Workbench' 진행 상황의 일부입니다.

사용된 기능:

HTML 캔버스에 스케치 그리기

스케치 설정을 UI에 노출

인쇄용 스케치 내보내기

스케치 애니메이션 전환

사용된 기술:

공병

디지털 오션 앱 플랫폼

이 기능 세트로 프로젝트를 종료하기로 결정했습니다. 다음 글은 제가 Hackathon에 제출하는 글이 될 것입니다. 이 작은 도구를 사용하여 내 전체 프로젝트와 향후 계획을 설명할 것이므로 이 기사를 계속 지켜봐 주십시오.