使用RequestAnimationFrame准确定时

到目前为止，我还没有找到关于此主题的大量文档。我得到的一般感觉是在为浏览器实现动画时，最好在bog标准JavaScript定时器上使用RequestAnimationFrame。我的理解是定时器不可靠，其解析度可能因不同浏览器而异。使用RequestAnimationFrame准确定时

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

但它不是我清楚如何才能保证动画蒸腾作用在固定的时间量。例如，我可能想要在2秒内从左向右设置动画。这是否可以使用RequestAnimationFrame或它是否击败了目的？

来源

2012-03-15 backdesk

刚好发生了，我不久前遇到了类似的问题，并提出了一个将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/

来源

2013-04-19 10:26:50

我删除了一堆不必要的垃圾（包括jQuery）http://jsfiddle.net/9pg9L/93/ – 2015-07-11 17:39:51

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

来源

2012-03-15 08:06:35 kirilloid

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

在这篇文章中，从Mozilla Hacks开始，当以恒定速度（像素/秒）进行动画处理时，会受到各种考虑。下面是一个解释基本概念的片段：

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

来源

2015-02-09 23:23:43 sillo01

使用RequestAnimationFrame准确定时

回答

相关问题