requestAnimationFrame으로 애니메이션 만들기

requestAnimationFrame(rAF)은 다음 브라우저 다시 그리기 전에 콜백을 예약하여 애니메이션을 화면 새로 고침 빈도와 동기화합니다(일반적으로 초당 60프레임). setInterval과 달리 rAF은 탭이 숨겨지면 일시 중지되므로 CPU와 배터리를 절약합니다.

rAF 반복에서는 현재 프레임을 그리는 애니메이션 함수를 정의한 다음, 다음 프레임을 예약하도록 requestAnimationFrame을 호출합니다. 브라우저는 매번 다시 그리기 전에 이 함수를 호출하여 화면의 프레임 속도에 맞춘 연속 애니메이션을 만듭니다.

rAF은 페이지가 로드된 후 경과한 밀리초를 나타내는 고해상도 시간 값을 콜백에 전달합니다. 이를 사용하면 프레임 속도와 무관한 움직임을 계산할 수 있습니다: delta = timestamp - lastTimestamp. 속도에 delta를 곱하면 프레임 속도와 관계없이 초당 같은 거리를 이동합니다.

마지막 프레임 이후 경과한 시간을 계산하고 그에 따라 움직임의 크기를 조정하세요. 초당 100픽셀로 움직이는 객체는 프레임마다 100 * (delta / 1000)픽셀을 이동합니다. 이렇게 하면 초당 30프레임과 초당 144프레임인 화면에서 물리 동작이 일관되게 유지됩니다.

rAF은 핸들을 반환합니다. cancelAnimationFrame(handle)로 취소하세요. 핸들을 변수에 저장하고 반복문 안에서 실행 중 플래그를 확인하거나, 구성 요소를 정리할 때 취소할 수 있습니다. 요소가 DOM에서 제거될 때는 항상 반복을 취소하세요.

각 프레임에서 다음 순서로 처리합니다: (1) 전체 캔버스에 clearRect를 적용하고, (2) 상태 변수(위치, 각도, 시간)를 업데이트하고, (3) 모든 객체를 새로운 위치에 그리고, (4) 다음 프레임을 위해 requestAnimationFrame을 호출합니다. clearRect를 절대 생략하지 마세요. 이전 프레임이 흔적처럼 누적됩니다.

간단한 속성 기반 애니메이션(호버 효과, 모달 슬라이드 인)에는 CSS 전환과 애니메이션을 사용하세요. 각 프레임을 세밀하게 제어해야 하는 복잡한 대화형 애니메이션(게임 반복, 물리 시뮬레이션, 캔버스 렌더링)에는 rAF을 사용하세요.

복잡한 장면에서는 먼저 오프스크린 캔버스에 그린 다음, 한 번의 작업으로 drawImage를 사용해 보이는 캔버스에 그립니다. 이렇게 하면 부분적으로 그려진 프레임을 보여 주지 않으므로 깜박임이 방지되고, 보이는 캔버스가 각 프레임마다 원자적으로 업데이트됩니다.

더 낮은 프레임 속도(예: 초당 30프레임)로 제한하려면 렌더링하기 전에 마지막 그리기 이후 충분한 시간이 지났는지 확인하세요. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. 반응성을 유지하려면 그와 관계없이 rAF을 예약하세요.

Chrome DevTools의 성능 패널은 JS 플레임 차트에 rAF 콜백을 기록합니다. 16밀리초를 초과하는 긴 콜백을 찾으세요. 이러한 콜백은 프레임 누락을 일으킵니다. 렌더링 → FPS 측정기에서 FPS 측정기를 사용하면 상호 작용 중 실시간 프레임 속도를 확인할 수 있습니다.

직접 시간을 관리하지 않는 더 간단한 선언적 애니메이션에는 element.animate(keyframes, options)를 사용하세요. WAAPI은 시간 함수, 채우기 모드 및 반복을 처리하여 프레임 계산을 브라우저에 맡깁니다. WAAPI으로 표현할 수 없는 사용자 지정 렌더링 논리에는 rAF을 사용하세요.

requestAnimationFrame 반복에서 애니메이션 속도에 delta 시간을 곱해야 하는 이유는 무엇인가요?

requestAnimationFrame은 JavaScript 애니메이션을 화면 새로 고침 빈도와 동기화하고, 숨겨진 탭에서는 일시 중지합니다. timestamp 매개변수를 사용하면 delta 시간에 따른 크기 조정으로 프레임 속도와 무관한 움직임을 구현할 수 있습니다. clear, update, draw, schedule로 구성된 캔버스 애니메이션 반복 패턴과 정리를 위한 cancelAnimationFrame은 부드럽고 효율적인 웹 애니메이션의 기반을 이룹니다.