setTimeout o setInterval o requestAnimationFrame

Question

Per giochi HTML5, con animazione canvas per dispositivi mobili.

Sono di fronte a problemi di prestazioni che differiscono dalla velocità tra ciascun dispositivo e gli altri.

requestAnimationFrame velocizza l'animazione del gioco in base alla velocità del dispositivo.
setInterval mi ha scioccato che ci sia un ritardo da un dispositivo a un altro.
setTimeout è anche lento il disegno su tela.

Chi ha avuto un'esperienza precedente con i giochi HTML5 Mobile può guidarmi a lanciare il modo migliore di tre di essi (o altre tecniche se disponibili) per sviluppare animazioni su tela essere stabili su diversi dispositivi mobili?

Answer 1

Utilizzare sempre requestAnimationFrame quando possibile, poiché è ciò per cui è destinato. È meglio per use a shim for support quando non lo è, quindi non è necessario occuparsi dei dettagli specifici.

Per consentire all'animazione o alla logica di gioco di eseguire alla stessa velocità nonostante il metodo utilizzato, è necessario utilizzare l'animazione basata sul tempo e calcoli basati sul tempo per la fisica o simili.

Answer 2

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); 
})(); 

uso questa funzione per tutti i casi