使用 RequestAnimationFrame 实现准确计时

到目前为止，我还没有找到很多关于这个主题的文档。我的总体感觉是，在为浏览器实现动画时，最好使用 RequestAnimationFrame 而不是 bog 标准 JavaScript 计时器。我的理解是计时器不可靠，并且它们的分辨率在不同浏览器之间可能会有所不同。

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

但我不清楚如何确保动画在固定的时间内发生。例如，我可能想在 2 秒内从左到右制作一些动画。使用 RequestAnimationFrame 可以做到这一点吗？或者它是否达到了目的？

恰巧，不久前我遇到了类似的问题，并想出了一种将 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/ http://jsfiddle.net/CGWGreen/9pg9L/