使用RequestAnimationFrame准确计时

Question

到目前为止,我还没有找到关于这个主题的大量文档.我得到的一般感觉是,在为浏览器实现动画时,最好使用RequestAnimationFrame而不是bog标准JavaScript计时器.我的理解是定时器不可靠,并且它们的分辨率可能因不同的浏览器而异.

我一直在关注这个要点:https://gist.github.com/1114293#file_anim_loop_x.js

但是我不清楚如何确保动画在固定的时间内发生.例如,我可能想在2秒内从左到右动画一些东西.这是否可以使用RequestAnimationFrame或者它是否能够达到目的？

Answer 1

恰巧，不久前我遇到了类似的问题，并想出了一种将 rAF 与 Performance.now() 结合起来的方法，该方法非常有效。

我现在能够使计时器精确到大约 12 位小数：

    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/