requestAnimationFrame

 

 

requestAnimationFrame

웹 브라우저에게 애니메이션을 수행하고자 할 때 다음 리페인트가 진행되기 전에 특정 함수를 호출하도록 요청하는 메서드

이 방법은 주로 웹 애니메이션, 게임 개발, 그리고 다른 시각적 변화를 필요로 하는 인터랙션을 구현할 때 사용된다

 

기본 사용법

requestAnimationFrame 함수는 콜백 함수를 인자로 받는다

이 콜백 함수는 브라우저가 다음 프레임을 그리기 전에 호출된다

콜백 함수에는 하나의 인자가 제공되며, 이는 호출 시점의 타임스탬프(고정 시간 기준의 시간 값)다

 

function step(timestamp) {
  // 애니메이션 코드
  requestAnimationFrame(step);
}

requestAnimationFrame(step);

 

특징 및 장점

• 프레임 레이트 일관성
  • requestAnimationFrame은 디스플레이의 리프레시 레이트에 맞추어 실행되므로, 60Hz 모니터에서는 대략적으로 1초에 60번 호출된다
  • 이로 인해 애니메이션이 부드럽게 보이게 한다
• 성능 최적화
  • 브라우저는 requestAnimationFrame을 사용하는 애니메이션의 성능을 최적화할 수 있다
  • 예를 들어, 애니메이션이 실행되지 않는 탭으로 전환하면 애니메이션 프레임 요청이 중단되어 배터리 수명과 리소스를 절약할 수 있다
• 정밀한 타이밍 제어
  • 콜백에 제공되는 타임스탬프를 사용하여 정밀한 타이밍 제어가 가능하다
  • 이를 통해 애니메이션의 시작, 지속 시간, 종료 등을 정확히 제어할 수 있다

 

사용 시 고려사항

• requestAnimationFrame은 반복 호출되어야 한다
  • 애니메이션 루프를 생성하려면 콜백 함수 내에서 자기 자신을 다시 호출해야 한다
• 애니메이션을 멈추기 위해서는 cancelAnimationFrame 함수를 사용해야 한다
  • 이 함수는 requestAnimationFrame 호출 시 반환되는 고유 ID를 인자로 받는다

let animationFrameId;

function startAnimation() {
  function step(timestamp) {
    // 애니메이션 코드
    animationFrameId = requestAnimationFrame(step);
  }
  
  animationFrameId = requestAnimationFrame(step);
}

function stopAnimation() {
  cancelAnimationFrame(animationFrameId);
}

 

requestAnimationFrame은 특히 애니메이션과 게임 개발에서 중요한 도구다

이를 사용함으로써 브라우저의 리프레시 레이트에 맞춘 부드러운 애니메이션을 구현할 수 있으며,

불필요한 리소스 낭비를 방지할 수 있다