requestAnimationFrame()

requestAnimationFrame()은 JavaScript의 window 객체에 속해 있습니다. 이 메서드는 브라우저 환경에서 전역적으로 사용할 수 있으며, 특정 클래스에 속해 있지 않습니다. 이는 window 객체의 메서드로, 브라우저의 전체적인 동작과 관련된 기능들을 포함하고 있습니다. 예를 들어, window.requestAnimationFrame()으로 호출할 수 있습니다만, window 객체는 전역 객체이므로 window.를 생략하고도 사용할 수 있습니다:

 

용도

requestAnimationFrame()은 웹 애플리케이션에서 애니메이션을 효율적으로 수행하기 위해 제공되는 JavaScript 메서드입니다. 이 메서드는 브라우저가 화면을 다시 그릴 준비가 되었을 때 특정 함수를 호출하도록 예약합니다. 이는 애니메이션을 매끄럽고 효율적으로 만들기 위해 사용됩니다.

 

 

• 브라우저 최적화: requestAnimationFrame()은 브라우저가 최적의 빈도로 애니메이션을 수행하도록 합니다. 브라우저는 일반적으로 초당 60프레임으로 화면을 갱신하므로, 이 메서드는 이를 고려하여 애니메이션의 프레임을 조정합니다.
• 배터리 수명 연장: 비활성 탭에서 애니메이션 실행을 중단하여 배터리 수명을 연장합니다. 브라우저가 활성화된 탭에서만 애니메이션을 실행하므로 비활성 탭에서 리소스 낭비를 줄입니다.
• 타이머 드리프트 방지: setTimeout()이나 setInterval()과 달리, requestAnimationFrame()은 브라우저의 화면 갱신 주기에 맞춰 호출되므로 타이머 드리프트를 방지할 수 있습니다.

function animate () {

    requestAnimationFrame(animate)
    effect.draw(ctx)
}
animate()

 

캔슬링

requestAnimationFrame()으로 예약된 콜백을 취소하려면 cancelAnimationFrame()을 사용할 수 있습니다.

let animationId = requestAnimationFrame(animate);

// 어떤 조건에서 애니메이션을 취소해야 할 때
cancelAnimationFrame(animationId);