window.requestAnimationFrame()


window.requestAnimationFrame()은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받습니다.

노트: 다음 리페인트에서 그 다음 프레임을 애니메이트하려면 콜백 루틴이 반드시 스스로 requestAnimationFrame()을 호출해야합니다.

화면에 새로운 애니메이션을 업데이트할 준비가 될때마다 이 메소드를 호출하는것이 좋습니다. 이는 브라우저가 다음 리페인트를 수행하기전에 호출된 애니메이션 함수를 요청합니다. 콜백의 수는 보통 1초에 60회지만, 일반적으로 대부분의 브라우저에서는 W3C 권장사항에 따라 그 수가 디스플레이 주사율과 일치하게됩니다. 대부분의 최신 브라우저에서는 성능과 배터리 수명 향상을 위해 requestAnimationFrame() 호출은 백그라운드 탭이나 hidden <iframe>에서 실행이 중단됩니다.

콜백 메소드에는 requestAnimationFrame()이 대기된 콜백을 실행하는 시점을 나타내는 단일 인자 DOMHighResTimeStamp (en-US)가 전달됩니다. 따라서, 모든 이전 콜백의 작업 부하를 계산하는동안 시간이 지나갔음에도 불구하고 단일 프레임에서의 다중 콜백은 각각 동일한 타임스탬프를 받습니다. 이 타임스탬프는 밀리초 단위의 십진수지만, 최소 정밀도는 1ms (1000 µs) 입니다.

구문

window.requestAnimationFrame(callback);

파라미터

callback
다음 리페인트를 위한 애니메이션을 업데이트할 때 호출할 함수입니다. 콜백 함수에는 requestAnimationFrame()이 콜백 함수 실행을 시작할 때의 시점을 나타내는 performance.now() 에 의해 반환되는 것과 유사한 DOMHighResTimeStamp (en-US) 단일 인자가 전달됩니다.

반환 값

콜백 리스트의 항목을 정의하는 고유한 요청 id 인 long 정수 값. 0 이 아니라는것 외에는 다른 추측을 할 수가 없는 값입니다. 이 값을 window.cancelAnimationFrame() 에 전달해 콜백 요청을 취소할 수 있습니다.

예시

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

노트

인터넷 익스플로러와 Edge 17 버전 이하는 페인트 사이클 이전에 requestAnimationFrame 실행을 보장하지 않습니다.

명세

브라우저 호환성

BCD tables only load in the browser

함께 보기