使用RequestAnimationFrame实现精准计时

Question

我迄今为止没有找到很多关于这个主题的文档。一般情况下，当在浏览器中实现动画时，最好使用请求动画帧而不是普通的JavaScript计时器。我的理解是计时器不可靠，其分辨率可能因不同浏览器而异。

我一直在研究这个gist：https://gist.github.com/1114293#file_anim_loop_x.js 但对我来说，如何确保动画在固定时间内完成还不清楚。例如，我可能想要在2秒内从左到右动画显示某些内容。使用请求动画帧是否可行，或者会否失去意义？

- backdesk

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/

- Chris GW Green

---

我删除了一堆不必要的东西（包括jQuery）http://jsfiddle.net/9pg9L/93/ - Zach Saucier

Answer 2

我会实现一个基于时间的动画。在每个 rAF 迭代中，您可以测量与上一次迭代相比的时间间隔。通过知道这个时间差和像素上的“距离”，您可以计算出达到2秒所需的速度。

在这篇来自Mozilla Hacks的文章中，讨论了在恒定速度（像素/秒）下进行动画时的各种考虑因素。以下是一个解释基本概念的片段：

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

- sillo01

Answer 3

RequestAnimationFrame 在某些方面更好：您可以在最有效的时候进行绘制。例如，RequestAnimationFrame 可以比仅使用计时器提供更好的 fps，但直接精确定时可能会更不可靠。您应该获取当前时间，将其与上一帧的值进行比较，并根据自上一帧以来经过的时间量计算动画。

- kirilloid