이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.


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

Note: 다른 프레임을 계속해서 그리고 싶다면 콜백이 스스로 requestAnimationFrame()을 호출하도록 해야 합니다.

화면에 새로운 애니메이션을 업데이트할 준비가 될때마다 이 메서드를 호출하는 것이 좋습니다. 그러면 애니메이션 함수가 다음 프레임이 그려지기 전에 실행됩니다. 이 콜백은 보통 1초에 60회정도 실행이 되지만 대부분의 브라우저들은 W3C 권장사항에 따라 디스플레이 주사율과 일치하도록 실행됩니다. 또한 배터리 수명과 성능향상을 위해 백그라운드 탭이나 보이지 않는 <iframe>에서는 requestAnimationFrame()의 호출이 멈춥니다.

콜백 메서드는 DOMHighResTimeStamp 라는 인자를 전달하는데  requestAnimationFrame()에 의해서 대기열에 들어간 콜백들이 실행되기 시작하는 시점의 시간을 가리킵니다. 따라서 이전 콜백을 실행하는데 시간이 경과했을지라도 같은 프레임에 실행되는 복수의 콜백은 같은 인자를 받게 됩니다. 이 타임스탬프는 밀리세컨드 단위의 십진수이지만 최소 정밀도는 1ms입니다.

Syntax

window.requestAnimationFrame(callback);

Parameters

callback
A parameter specifying a function to call when it's time to update your animation for the next repaint. The callback has one single argument, a DOMHighResTimeStamp, which indicates the current time (the time returned from performance.now() ) for when requestAnimationFrame() starts to fire callbacks.

Return value

A long integer value, the request id, that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value. You can pass this value to window.cancelAnimationFrame() to cancel the refresh callback request.

Example

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);

Specification

Specification Status Comment
HTML Living Standard
The definition of 'requestAnimationFrame' in that specification.
Living Standard No change, supersedes the previous one.
Timing control for script-based animations
The definition of 'requestAnimationFrame' in that specification.
Obsolete Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 24
Full support 24
Full support 10
Prefixed
Prefixed Requires the vendor prefix: webkit
Edge Full support YesFirefox Full support 23
Notes
Full support 23
Notes
Notes Callback parameter is a DOMHighResTimestamp. This means ten microsecond precision and zero time as performance.now().
No support 11 — 42
Prefixed Notes
Prefixed Requires the vendor prefix: moz
Notes Callback parameter is a DOMTimestamp. This means millisecond precision and zero time as Date.now().
No support 4 — 11
Prefixed Notes
Prefixed Requires the vendor prefix: moz
Notes Could be called with no input parameters.
IE Full support 10Opera Full support 15
Full support 15
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: o
Safari Full support 6.1
Full support 6.1
Full support 6
Prefixed
Prefixed Requires the vendor prefix: webkit
WebView Android Full support YesChrome Android Full support 25
Full support 25
Full support 18
Prefixed
Prefixed Requires the vendor prefix: webkit
Edge Mobile Full support YesFirefox Android Full support 23
Full support 23
No support 14 — 42
Prefixed
Prefixed Requires the vendor prefix: moz
Opera Android Full support 15Safari iOS Full support 7.1
Full support 7.1
Full support 6.1
Prefixed
Prefixed Requires the vendor prefix: webkit
Samsung Internet Android ?
Return valueChrome Full support 23Edge Full support YesFirefox Full support 11IE Full support 10Opera Full support 15Safari Full support 6.1WebView Android Full support YesChrome Android Full support 25Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 15Safari iOS Full support 6.1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

 

See also

문서 태그 및 공헌자

이 페이지의 공헌자: Snark
최종 변경자: Snark,