1

I'm looking at the emerging standards for requestAnimationFrame and cancelAnimationFrame

http://paulirish.com/2011/requestanimationframe-for-smart-animating/

and the various polyfills provided here:

https://gist.github.com/paulirish/1579671

The semantics of using these functions are slightly tricky to me. Specifically, suppose you requestAnimationFrame(callback) once. is it necessary to call cancelAnimationFrame if you want to requestAnimationFrame(callback) a second time before the first callback has been called? Will the browser call the callbacks repeatedly? Or will the browser automatically replace the doubled calls with a single one?

I'm asking because my current animation is really laggy on Firefox, and requestAnimationFrame doesn't seem to be helping too much. But I may be calling it too quickly from multiple sources. An authoritative answer on this would be great.

Community
  • 1
  • 1
Andrew Mao
  • 35,740
  • 23
  • 143
  • 224
  • Preliminary testing seems to indicate that canceling outstanding animation requests before ordering new ones makes Firefox less laggy. This effect will probably show up on any browser where the redraw event happens more slowly than animations are fired off. – Andrew Mao Mar 27 '13 at 20:33

1 Answers1

0

Per the spec:

Note

requestAnimationFrame only schedules a single update to the script-based animation. If subsequent animation frames are needed, then requestAnimationFrame will need to be called again from within the callback.

Also note that multiple calls to requestAnimationFrame with the same callback (before callbacks are invoked and the list is cleared) will result in multiple entries being in the list with that same callback, and thus will result in that callback being invoked more than once for the animation frame.

http://www.w3.org/TR/animation-timing/

The calls to requestAnimationFrame will schedule only one callback call. After your callback has been processed, its entry in the callback list if removed. So you don't have to cancel previous calls.

Francois Joly
  • 307
  • 2
  • 11
  • 1
    That spec seems to indicate that you DO have to cancel previous requests if you are about to schedule two calls (drawing the same thing) for the same frame, causing the slowdown that I observed. – Andrew Mao May 06 '13 at 21:48
  • Of course if you make multiple calls in the same frame, you're just wasting time. I'm sorry I didn't read the question carefully. I didn't realize you were asking the question in the context of only 1 frame. – Francois Joly May 07 '13 at 16:46