Browser-independent way of doing request animation frame.

[munificent]

dart:html exposes webkitRequestAnimationFrame, but that means when compiled to JS it won't work in Firefox or IE. Ideally, it would just expose requestAnimationFrame() and the generated JS would detect and use the appropriate one:

requestID = window.mozRequestAnimationFrame(callback); // Firefox
window.msRequestAnimationFrame(callback); // IE 10 PP2+
window.webkitRequestAnimationFrame(callback[, element]); // Chrome/Webkit

[DartBot]

This comment was originally written by @bp74

---

I just ran into the same problem. My current project is porting a Flash game to Dart/HTML5 and if i can't use the "RequestAnimationFrame" cross browser it is really bad. Please address this issue soon.

[jacob314]

We need to add $dom_mozRequestAnimationFrame to dart:html or implement a generic scheme of providing multiple optional native bindings for a native method.
for example, the ideal terse code for this might be:

void requestAnimationFrame(AnimationFrameCallback callback) "webkitRequestAnimationFrame,mozRequestAnimationFrame" {
  setTimeout(callback, 0);
}

Which means use webkitRequestAnimationFrame or mozRequestAnimation frame if available
otherwise fallback to using setTimeout 0.

---

Set owner to @rakudrama.

[DartBot]

This comment was originally written by @bp74

---

Thank you jacob, that sounds good. I have another suggestion:

You could remove "webkitRequestAnimationFrame" and add the standard compliant "requestAnimationFrame" declaration. Now i add some JavaScript code (see below) to my page ... this should work right? I can't test it because the Dart2JS Compiler does not work with the latest builds of the Dart Editor :(

<pre>
if ( !window.requestAnimationFrame ) {
  window.requestAnimationFrame = ( function() {
    return window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback) {
                   window.setTimeout( callback, 1000 / 60, new Date()); };
    } )();
}
</pre>

I think Chrome AND Firefox (and IE 10) support "requestAnimationFrame" allready, right?

[rakudrama]

Reference: 'A robust polyfill' at
http://paulirish.com/2011/requestanimationframe-for-smart-animating/

[vsmenon]

Removed Area-UI label.
Added Area-DOM label.

[DartBot]

This comment was originally written by @bp74

---

Thank you very much, the latest build 6825 has got the new implementation, it works great!

[rakudrama]

Added Fixed label.