Javascript 使用RequestAnimationFrame精确计时

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

我一直在看这个要点：

---

但我不清楚如何确保动画在固定的时间内播放。例如，我可能想在2秒内从左到右设置动画。这是使用RequestAnimationFrame可以做到的，还是违背了目的？

RequestAnimationFrame在下一件事中更好：您可以在最有效的时候进行绘制。也就是说，

RequestAnimationFrame

可以提供比计时器更好的fps，但直接精确计时可能更不可靠。您应该获取当前时间，将其与前一帧的值进行比较，并根据自上一帧以来经过的时间量计算动画。

恰好如此，不久前我遇到了类似的问题，并提出了一种将rAF与性能相结合的方法。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(); 
                };
        })();

---

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

在本文中，将讨论以恒定速度（像素/秒）设置动画时的各种注意事项。下面是一个解释基本概念的片段：

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

---

我删除了一堆不必要的垃圾（包括jQuery）