使用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準確定時

回答

相關問題