使用 RequestAnimationFrame 精确计时答案

【问题标题】：Accurate Timing with RequestAnimationFrame使用 RequestAnimationFrame 精确计时
【发布时间】：2015-07-21 00:18:10
【问题描述】：

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

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

但我不清楚如何确保动画在固定的时间内发生。例如，我可能想在 2 秒内从左到右制作动画。使用 RequestAnimationFrame 是可行的还是违背了目的？

【问题讨论】：

标签： javascript html

【解决方案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/

【讨论】：

我删除了一堆不必要的废话（包括jQuery）jsfiddle.net/9pg9L/93

【解决方案2】：

RequestAnimationFrame 在接下来的事情中会更好：你可以在它最有效的时候进行绘制。 IE。 RequestAnimationFrame 可以提供比计时器更好的 fps，但直接精确的计时可能更不可靠。您应该获取当前时间，将其与前一帧的值进行比较，并根据自上一帧以来经过的时间量计算动画。

【讨论】：

【解决方案3】：

我会实现一个基于时间的动画。在每次 rAF 迭代中，您可以测量相对于前一次迭代的时间流逝。知道这个增量时间和以像素为单位的“距离”，您就可以计算出获得 2 秒所需的速度。

在这篇来自Mozilla Hacks 的文章中，我们处理了以恒定速度（像素/秒）制作动画时的各种注意事项。这是一个解释基本概念的sn-p：

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

【讨论】：