[javascript] 자바스크립트 애니메이션 RequestAnimationFrame

참고: https://medium.com/geekculture/requestanimationframe-in-javascript-82a913cf8c46

JavaScript의 네이티브 requestAnimationFrame 메소드를 사용하면 브라우저가 무언가를 아주 빠르게 반복하도록 할 수 있습니다. 이는 다음 프레임을 그리기위해 스스로를 호출해합니다.

requestAnimationFrame 사용 방법

requestAnimationFrame 메소드는 콜백함수에 해당하는 매개변수 하나만 받습니다.

문법:

window.requestAnimationFrame(callback);

- callback: 다음 프레임 그리기 등 애니메이션을 업데이트 할 때 호출되는 함수입니다.

애니메이션을 위한 requestAnimationFrame 메소드는 non-blocking 함수입니다. 즉 처음 실행된 callback의 코드가 모두 실행되지 않았어도 다음번 callback이 호출되었다면 바로 다음번 callback도 동시에 같이 실행됩니다.

이 메소드는 애니메이션을 부드럽게 보이기 위해 초당 60 프레임(fps)으로 작동하는 것을 목표로 합니다.

이를 다음의 코드와 같이 구현할 수도 있습니다.

setInterval(() => {
  // animation code
}, 1000/60);

하지만 setInterval 보다 더 최적화된 requestAnimationFrame을 사용하는게 좋습니다.

• 최적화된 만큼 애니메이션이 매끄러워진다
• 비활성 탭의 애니메이션은 중지되어 CPU 사용량을 줄인다

다음의 코드는 requestAnimationFrame 메소드를 사용한 실질적인 사용법입니다.

function smoothAnimation() {
    // animtion
    requestAnimationFrame(smoothAnimation)
}

requestAnimationFrame(smoothAnimation)

애니메이션을 시작하고 중지하는 방법

requestAnimationFrame은 id를 리턴합니다. 이를 사용해 진행중인 애니메이션을 중지할 수 있습니다.

let reqAnimationId

function smoothAnimation() {
    // animtion
    reqAnimationId = requestAnimationFrame(smoothAnimation)
}

function start() {
    reqAnimationId = requestAnimationFrame(smoothAnimation)
}

function end() {
     cancelAnimationFrame(reqAnimationId)
}

console.log("reqAnimationId", reqAnimationId)

다음 codepen에서 자세한 코드를 확인할 수 있습니다.

See the Pen requestAnimationFrame dot by shinyks (@shinyks) on CodePen.

정리

브라우저에서 애니메이션을 수행하고 최적화되기를 원하는 경우 requestAnimationFrame API를 사용하는 것이 좋습니다.

관련 글

자바스크립트 스프라이트 애니메이션

자바스크립트 setInterval 사용 방법