requestAnimationFrame在弱機器上運行緩慢。解決？

所以，我正在做一個動畫（不在網站/網頁！），它使用Javascript。對於動畫，我使用而不是setInterval，因爲setInterval對我所需要的功能不夠好。requestAnimationFrame在弱機器上運行緩慢。解決？

但是，儘管在體力強大的設備上運行良好，但慢速設備無法跟上標準的60 FPS，從而減慢整個動畫時間。

有沒有一種方法可以使動畫在一定的時間範圍內工作，並且FPS根據其保持的不同而有所不同？其他想法也是受歡迎的。

（請注意，我真的不希望郵編，只是把我的話這個我只想想法。）

來源

2013-01-24 Josiah

標準做法是讓動畫基於調用之間的時間而不是靜態增量。 – Shmiddty

看一看這個演示：http://jsfiddle.net/q7ckebmh/

function Animate(id, useTime){ 
    var can = document.getElementById(id), 
     ctx = can.getContext('2d'), 
     wid = can.width, 
     hei = can.height, 
     lst = Date.now(), 
     rps = 2*Math.PI, 
     step = rps/60,      // Expecting 60fps 
     ang = 0; 

    (function draw(){ 
     var dif = Date.now() - lst;   // Milliseconds since last we drew. 
     lst = Date.now();      
     if (useTime) step = rps * dif/1000; // Allows for variable fps 

     ang += step;       // Increment our placeholder. In the 
              // case where step is constant, this 
              // ends up looking "slow" when we 
              // have less than 60fps. 

     ctx.clearRect(0,0,wid,hei); 
     ctx.beginPath(); 
     ctx.arc(wid/2 + Math.cos(ang)*50,hei/2 + Math.sin(ang)*50, 
      10,0,2*Math.PI); 
     ctx.fill(); 

     requestAnimationFrame(draw); 
    })(); 
} 

Animate('can1', false); 
Animate('can2', true);

你請注意，如果調整幀大小，則第一個動畫會因爲跳過動畫幀而減慢速度。

第二個動畫看起來並沒有放慢速度，因爲它將圓圈的位置定位在它上次調用以來的時間。它看起來有點波濤洶涌，但總是這個位置是正確的。

來源

2013-01-24 18:37:44 Shmiddty

謝謝。我會研究這個。 – Josiah

requestAnimationFrame在弱機器上運行緩慢。解決？

回答

相關問題