使用RequestAnimationFrame准确计时

Question

I've not found a lot of documentation on this subject so far. The general feel I get is when implementing animations for the browser it is better to use RequestAnimationFrame over bog standard JavaScript timers. My understanding is that timers are unreliable and their resolution can vary between different browsers.

I've been looking at this gist: https://gist.github.com/1114293#file_anim_loop_x.js

But it's not clear to me how you can ensure that an animation transpires over a fixed amount of time. For example I might want to animate something from left to right within 2 seconds. Is this do-able using RequestAnimationFrame or does it defeat the purpose?

Answer 1

It just so happens, I had a similar problem not long ago and came up with an approach which combines rAF with performance.now() which works very effectively.

Im now able to make timers accurate to approx 12 decimal places:

    window.performance = window.performance || {};
    window.performance.now = (function() {
        return performance.now       ||
            window.performance.mozNow    ||
            window.performance.msNow     ||
            window.performance.oNow      ||
            window.performance.webkitNow ||
                function() {
                    return new Date().getTime(); 
                };
        })();

http://jsfiddle.net/CGWGreen/9pg9L/

Answer 2

I would implement a time based animation. In each rAF iteration you can measure the time lapse respect to the previous iteration. Knowing this delta time and the "distance" in pixels you can calculate the necessary speed to get the 2 secs.

In this article from Mozilla Hacks are treated various considerations when animating at constant speed (pixel/sec). Here is a snippet that explains the basic concept:

animLoop(function( deltaT ) {
  elem.style.left = ( left += 10 * deltaT / 16 ) + "px";
  if ( left > 400 ) {
    return false;
  }
});

Answer 3

RequestAnimationFrame is better in next thing: you can draw when it sould be most effective. Ie RequestAnimationFrame could give better fps than just timers, but straight exact timing may be even less reliable. You should get current time, compare it with value from previous frame and calculate animations in accordance with amount of time passed since last frame.