2012-12-18 104 views
18

對於HTML5遊戲,使用移動設備的畫布動畫。setTimeout或setInterval或requestAnimationFrame

我面臨着各自不同的設備與其他人之間的速度也有一定的性能問題。

requestAnimationFrame根據設備速度加速遊戲動畫。
的setInterval嚇了我一跳,有從一個設備到另一個延遲。
setTimeout在畫布上繪圖也很慢。

曾與移動HTML5遊戲以往的經驗可以指導我扔他們三個人(或其他技術如果可用)用於開發在畫布上的動畫是在不同的移動設備穩定的最佳方式?

回答

19

始終使用​​時可能的,因爲這就是它的意思了。當它不是時,最好是use a shim for support,所以你不需要處理具體的細節。

爲了動畫或遊戲邏輯以相同的速度,儘管實際使用的方法的執行,則應該使用基於時間的動畫和基於時間的計算爲物理或這樣。

+0

上的Android手機瀏覽器的舊版本不支持requestAnimationFrame(HTC)......我試試這個網站http://ie.microsoft.com/testdrive HTC設備上的/Graphics/RequestAnimationFrame/Default.html,並且不支持! – Solieman

+1

@Solieman保羅愛爾蘭有一個偉大的博客帖子有requestAnimationFrame墊片:http://paulirish.com/2011/requestanimationframe-for-smart-animating/ – Jasper

+0

@Solieman我鏈接的代碼(墊片),需要使用正確的護理方法。如果'requestAnimationFrame'不被支持,它將自動使用其他方法之一。賈斯珀的鏈接有更多的信息。 –

13
window.requestAnimFrame = function(){ 
    return (
     window.requestAnimationFrame  || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame  || 
     window.msRequestAnimationFrame  || 
     function(/* function */ draw1){ 
      window.setTimeout(draw1, 1000/60); 
     } 
    ); 
}(); 
    window.requestAnimFrame(draw); 
})(); 

使用該功能適用​​於所有情況下

+0

'1000/60'做什麼?爲什麼不只是一個簡單的「結果/評估」數字?除此之外,還有一個來自['GitHub'](https://gist.github.com/mrdoob/838785)的複製解決方案,不會給原始海報 – 2017-12-03 13:47:17

相關問題