增加FPS以JavaScript

動畫我正在使用JavaScript動畫：增加FPS以JavaScript

function animate(){ 
    window.setTimeout(function(){ 

     //Do a new frame and recall this function till the animation is finished 

    }, 1000/FPS);//FPS Default 15 approximately 60FPS 
} 
animate();

我不知道我怎樣才能提高FPS不失品質？使用已經內置的css3不是一個選項，因爲我有自定義的動畫。

來源

2011-04-09 einstein

你嘗試過'window.requestAnimationFrame'嗎？ – 2014-07-16 17:35:07

值得了解一些事情：60以上的FPS通常毫無意義，因爲瀏覽器比任何時候都更快地重新繪製屏幕。和setTimeout不一致。僅僅因爲你告訴腳本每50ms運行一次（例如），並不意味着它會。在任一方向上通常有15ms的變化。

提高質量的體面策略將使用某種緩解計算，將FPS與瀏覽器重繪週期同步 - 並使用運動模糊等來平滑效果。

查看http://weblogs.mozillazine.org/roc/archives/2010/11/measuring_fps.html瞭解Firefox的一些具體見解。

來源

2011-04-09 11:35:26

嗨！這是一件奇怪的事情。我使用了window.webkitRequestAnimationFrame函數，我的FPS比使用普通的setTimeout函數要低。 – einstein 2011-04-09 15:04:04

一對夫婦的建議：

不要依賴setTimeout，setInterval，或任何其他內置的實用程序，用於調度函數調用以提供高準確度和精確度，特別是當你執行自定義渲染代碼。
在您的想法中解耦frame和time的想法。是的，動畫在內部是一系列的幀，但最終的結果是應該看起來隨着時間流逝而流動的東西。因此，不是繪製幀'n'，而是爲1000/FPS安排超時，然後假定「現在是繪製幀'n + 1'的時間」，嘗試繪製幀'n'，將時間安排爲非常短的時間間隔（如10 ms），然後（當超時觸發時）測量動畫開始時間和當前時間點之間經過的時間量。然後用你的經過時間來決定在這個時刻這個幀應該顯示什麼（如果你的渲染代碼需要很長的時間，這個幀可能仍然是'n'或'n + 1'，或者甚至'n + 3'執行），並渲染該幀。相信我，你會得到更順暢，更一致的結果。

在如何提高幀率和/或渲染質量，一旦你有一個合理的建立渲染循環而言，這是所有關於優化//Do a new frame代碼就像你所能。

來源

2011-04-09 11:35:47 aroth

您能否提供示例源代碼以更好地理解您關於'frame'和'time'解耦的想法？謝謝。 – 2014-03-28 19:52:50

增加FPS以JavaScript

回答

相關問題