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/

Answer 2

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

Answer 3

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

在Mozilla Hacks的这篇文章中，当以恒定速度（像素/秒）制作动画时会考虑各种因素。这是一个解释基本概念的片段：

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

使用RequestAnimationFrame准确计时

3 个答案: