如何在所有系統上的所有瀏覽器上以相同的速度播放JavaScript動畫？

我有一個函數可以計算在X軸和Y軸上移動的各種對象（我稱之爲frameRender()）和將結果幀應用到對象[我稱之爲frameDisplay()]的動畫中的下一幀。物體不僅從A點移動到B點，它們不斷移動，始終接收新的目標座標。我使用setInterval()，間隔時間爲1000/frameRate，但由於瀏覽器沒有準確的計時，所以這似乎不起作用。如何在所有系統上的所有瀏覽器上以相同的速度播放JavaScript動畫？

問題是：如何確保動畫具有恆定的幀速率，並且在所有瀏覽器上以相同的速度在所有系統上運行？我已經嘗試了一切，並且即使在不同的瀏覽器上也看不到準確的結果（我在Firefox和Chrome上測試，Chrome通常顯示速度更快）。

結果應該是：當播放速度慢時，動畫間隔應該首先減少，然後嘗試跳過一些幀[跳過frameDisplay()]，如果DOM顯示慢，直到播放正確。播放速度快時，應增加動畫間隔，使動畫以正確的速度播放。

但是，如何保持所有這一切的一致性，因爲您無法始終確定何時瀏覽器變慢，或者執行速度快。例如，如果運動的峯值很大，並且爲了保持幀速率穩定而減少間隔，然後突然大部分運動物體停止或移動不多，它會突然表現得非常快！

任何想法？

來源

2010-06-28 stagas

答案is here，由Glenn Fiedler撰寫的一篇很好的文章，需要稍微調整一下在Javascript中進行轉換，但原理是一樣的。基本上，您需要使用一個累加器來累計delta時序，並根據這個時序執行步驟。無需改變任何物理數學或任何東西，解決方案就是即插即用。還有一個很酷的內插器，可以消除口吃，還可以讓您做超慢的平滑運動（用於重播等）。這太棒了，適用於物理學，並應該在任何基於步進的運動中工作。基本上所有你需要精確計時的遊戲動作就在那裏。

來源

2010-06-29 12:25:35 stagas

問題是：如何確保動畫具有恆定的幀速率，並且在所有瀏覽器上，在所有系統上以相同的速度運行？

你無法對幀率做任何事情。您可以控制的唯一一件事是您的應用程序如何基於時間更新而進行更新。這在瀏覽器之外也是如此，並且是遊戲開發中的一個常見話題。

要做的最好的事情是跟蹤更新之間的增量（讀取：時間差）。

(function() { 
    function getTime() { 
     return new Date().getTime(); 
    } 
    var last = getTime(); 

    function update(delta) { 
     // Update your application state on delta (ms of time passed) 
    } 

    (function loop() { 
     update(last = getTime()-last); 
     render(); 
     setTimeout(loop, 20); // 20 = attempt 50fps 
    }()); 
}());

請注意在這裏使用setTimeout。這是爲了避免loop（）被調用爲不同步。即使先前的呼叫沒有完成，setInterval也會繼續發射。

來源

2010-06-28 22:41:52 Matt

所以基本上你的意思是我應該改變幀渲染數學包括一個delta變量，所以我可以移動例如基於前一次通過的對象或多或少的X Y像素？ – stagas 2010-06-28 22:52:31

@stagas - 正好。這樣，如果一次更新在50ms內，另一次在450ms內，如果你明白我的意思，你的應用程序仍然應該處於「500ms大關」。 – Matt 2010-06-28 22:54:51

很酷，會馬上試試，謝謝 – stagas 2010-06-28 23:00:19

可以synhronize與系統時間動畫。

將當前系統時間保存在變量中。在所有的框架上，然後你想重畫圖片檢查當前時間 - 你的變量等於一些增量時間。然後重新制作您的動畫。否則等待這個區別

來源

2010-06-28 22:46:33 Falcon

如何在所有系統上的所有瀏覽器上以相同的速度播放JavaScript動畫？

回答

相關問題