javascript - requestAnimationFrame

1. MDN
 
2. Web technology for developers
 
3. Web API Interfaces
 
4. window.requestAnimationFrame()

window.requestAnimationFrame()

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.

Note: Your callback routine must itself call requestAnimationFrame() if you want to animate another frame at the next repaint.

You should call this method whenever you're ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint. The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation. The callback rate may be reduced to a lower rate when running in background tabs.

The callback method is passed a single argument, a DOMHighResTimeStamp, which indicates the current time when callbacks queued by requestAnimationFrame begin to fire. Multiple callbacks in a single frame, therefore, each receive the same timestamp even though time has passed during the computation of every previous callback's workload. This timestamp is a decimal number, in milliseconds, but with a minimal precision of 10 µs.

Syntax

requestID = window.requestAnimationFrame(callback);       // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS)
requestID = window.mozRequestAnimationFrame(callback);    // Firefox < 23
requestID = window.webkitRequestAnimationFrame(callback); // Older versions of Safari / Chrome

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, aDOMHighResTimeStamp, which indicates the current time for when requestAnimationFrame starts to fire callbacks.

Return value

requestID is a long integer value 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

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;


var start = null;

var d = document.getElementById("SomeElementYouWantToAnimate");

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

requestAnimationFrame(step);

Browser compatibility

• Desktop
 
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	10.0 webkit 24.0	4.0 moz [1] 23 [2]	10.0	(Yes) -o 15.0	6.0 webkit 6.1
requestID return value	23.0 webkit 24.0	11.0 (11.0) moz	10.0	(Yes) -o 15.0	(Yes)

Gecko notes

[1] Prior to Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), mozRequestAnimationFrame() could be called with no input parameters. This is no longer supported, as it's not likely to become part of the standard.

[2] The callback parameter is a DOMTimeStamp instead of a DOMHighResTimeStamp if the prefixed version of this method was used. DOMTimeStamp only has millisecond precision, but DOMHighResTimeStamp has a minimal precision of ten microseconds.

Chrome notes

The correct call in Chrome to cancel the request is currently window.cancelAnimationFrame(). Older versions, window.webkitCancelAnimationFrame() &window.webkitCancelRequestAnimationFrame(), have been deprecated but are still supported for now.

Specification

Timing control for script-based animations: requestAnimationFrameWD

See also

• window.mozAnimationStartTime
• window.cancelAnimationFrame()
• mozRequestAnimationFrame - Blog post
• requestAnimationFrame for smart animating - Blog post
• Animating with javascript: from setInterval to requestAnimationFrame - Blog post
• Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1 - Blog post
• TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations

source - https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

---

Using requestAnimationFrame

There used to be just one way to do a timed loop in JavaScript:setInterval(). If you needed to repeat something pretty fast (but not as-fast-as-absolutely-possible like a for loop), you'd use that. For the purposes of animation, the goal is sixty "frames" per second to appear smooth, so you'd run a loop like this:

setInterval(function() {
  // animiate something
}, 1000/60);

There is a better alternative to this now. Paul Irish introduced requestAnimationFrame over two years ago. I don't have a whole lot to add to it, I just had never actually used it before and now I have so I thought I'd help spread the word and write about its basic usage.

Why better?

As Paul explained:

• The browser can optimize it, so animations will be smoother
• Animations in inactive tabs will stop, allowing the CPU to chill
• More battery-friendly

The Simplest Possible Example

function repeatOften() {
  // Do whatever
  requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);

Call it once to kick it off, and your function recursively calls itself.

Start and Stop

requestAnimationFrame returns an ID you can use to cancel it, just like setTimeout orsetInterval does. jQuery used here only to demonstrate a simple animation and bind events.

var globalID;

function repeatOften() {
  $("<div />").appendTo("body");
  globalID = requestAnimationFrame(repeatOften);
}

$("#start").on("click", function() {
  globalID = requestAnimationFrame(repeatOften);
});

$("#stop").on("click", function() {
  cancelAnimationFrame(globalID);
});

Example of this:

Browser Support

See the Can I Use... tables.

The only notable problems are IE 9-, iOS 5-, and Android. But not actually a problem, because:

Polyfill

Like many fancy web features, it's nice to use it when available and fallback to something that works when you can't. Probably best just to refer to this Gist. Literally just include that chunk anywhere before you use requestAnimationFrame or cancelAnimationFrame.

Using this, you'll be able to use requestAnimationFrame in literally any browser.

Slightly More Complex Example

I learned about this while making a dumb little demo to learn canvas better:

What would actually be more complex is several animations running at once using this (that still falls back OK). Feel free to link some of that goodness up in the comments if you know of examples.

SHARE ON

출처 - http://css-tricks.com/using-requestanimationframe/