[whatwg] A better animation API

[Robert Eisele]

Hello,

mozRequestAnimationFrame became part of Firefox 4 Beta 4 and as a result
also (o|webkit|ms)RequestAnimationFrame got implemented. This way
animations can be slow downed safely to a minimum when the animation is
executed in an inactive tab or something like that. Also the performance
and the synchronicity with CSS keyframes can be improved directly inside
the browser.

As a "polyfill" Paul Irish published a small snippet with a setTimeout
fallback:
http://paulirish.com/2011/requestanimationframe-for-smart-animating/ . Joe
Lambert wrapped another layer around Paul Irish's method, implementing a
setInterval replacement, too:
http://blog.joelambert.co.uk/2011/06/01/a-better-settimeoutsetinterval/

All that's nice, but why is there no general proposal implementing a native
setInterval replacement? Also Robert O'Callhan mentioned a
beginAnimation/endAnimation-API:
http://robert.ocallahan.org/2010/08/mozrequestanimationframe_14.html .
Sure, it's more dangerous but also setInterval has this kind of hazard.

It's certainly also more difficult to implement but asking for every frame
to continue has also the disadvantage of beeing as slow as setting up a new
timeout for every frame. That's why setInterval surpass setTimeout's
performance (okay, at least it should).

Maybe an API would also make sense, which runs for a given duration. This
way, animations like jQuery's animate() could profit immensely from a
native API.

My proposal for an API extension is as follows:

var ret = window.beginAnimation(function() {

var pos = (this.currentTime - this.startTime) / this.avgFPS;

/* ... */
});
window.endAnimation(ret);

For the jQuery-esque API:

var ret = window.beginAnimation(function() {

var pos = this.position; /* Interval [0, 1] */

/* ... */
}, 400 /* Run for 400ms */);
window.endAnimation(ret);


Regards,
Robert Eisele