DOM

settings_applicationsEventTarget  >   settings_applicationsWindow  >   settings_applicationswindow

DOM

Draft
  • account_tree
  • bug_report

IntrequestIDrequestAnimationFrame(Functioncallback)

웹브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트(repaint)가 진행되기 전에 해당 애니메이션을 업데이트하는 지정된 함수를 호출한다.

설명

requestAnimationFrame() 메소드는 비동기 함수로서 CSS 애니메이션으로는 처리가 어렵거나 canvas, SVG 등의 애니메이션을 직접 구현하고자 할 때 사용된다.

이 메소드는 애니메이션 구현에 필요한 타임라인 프레임 비율을 모니터의 주사율에 맞추어져 실행하도록 해준다. 만약 모니터의 주사율이 60FPS라면 1초에 60번 프레임 비율을 갖는다. 이말은 1초에 60프레임을 보여준다고 할 수 있다.

정리한다면, 1 프레임당 동작할 로직을 구현한 함수를 준비하고 requestAnimationFrame() 메소드에게 콜백 함수 타입의 인수로 등록한다. 주의할 점은 콜백 함수내에서 다시 requestAnimationFrame()으재귀 호출을 해야 한다.

원하는 실행 시점에 requestAnimationFrame() 메소드를 호출하고 콜백 함수 내에 로직에서 애니메이션 종료 시점을 정한다.

한편으로는 setInterval() 메소드와 비교할 수도 있을 것이다. 사실 requestAnimationFrame() 메소드가 추가되기 전에는 setInterval() 메소드를 이용해서 애니메이션을 구현했다. 하지만 setInterval() 메소드는 범용으로서 사용된 메소드라는 점이 다르다. 즉 requestAnimationFrame() 메소드는 애니메이션을 위해서 등장한 설계 자체가 다른 메소드이다. 콜백 함수에서 timestamp 값을 매개변수로 받을 수 있다는 것이 대표적이라 할 수 있다. 애니메이션에서 시간 개념은 매우 중요하다. 콜백 함수에서 timestamp 값을 받아 활용하는 로직 구현도 가능하다.

구문

형식
window.requestAnimationFrame(callback)

매개 변수

Functioncallback필수

호출되어 실행할 함수

반환

IntrequestID

반환되는 ID는 window.cancelAnimationFrame() 메소드의 인수로 사용되어 동작을 취소하게 할 수 있다.

기술 문서

FPS를 이용하여 애니메이션 속도 제어

지원 웹브라우저