W3C home > Mailing lists > Public > whatwg@whatwg.org > December 2011

[whatwg] A better animation API

From: Robert Eisele <robert@xarg.org>
Date: Sat, 10 Dec 2011 08:55:56 +0100
Message-ID: <CAAcXor6ba0B3NRcV2SBOkjoX0i02kEZT6CR0xbnU_w_-NSfDog@mail.gmail.com>

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
http://paulirish.com/2011/requestanimationframe-for-smart-animating/ . Joe
Lambert wrapped another layer around Paul Irish's method, implementing a
setInterval replacement, too:

All that's nice, but why is there no general proposal implementing a native
setInterval replacement? Also Robert O'Callhan mentioned a
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;

/* ... */

For the jQuery-esque API:

var ret = window.beginAnimation(function() {

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

/* ... */
}, 400 /* Run for 400ms */);

Robert Eisele
Received on Friday, 9 December 2011 23:55:56 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:59:38 UTC