setTimeout lub setInterval lub requestAnimationFrame

Question

Dla gier HTML5 z animacją na płótnie dla urządzeń mobilnych.

Mam do czynienia z pewnymi problemami z wydajnością, które różnią się szybkością między każdym urządzeniem a innymi.

requestAnimationFrame przyspieszenie animacji gry zgodnie z prędkością urządzenia.
setInterval zaszokował mnie, że istnieje opóźnienie z urządzenia do innego.
setTimeout jest również powolny rysunek na płótnie.

Osoby, które miały wcześniejszy kontakt z grami Mobile HTML5, mogą pomóc mi w opracowaniu najlepszej z trzech metod (lub innych technik, jeśli są dostępne) do tworzenia animacji na płótnie, która będzie stabilna na różnych urządzeniach mobilnych?

Answer 1

Zawsze używaj requestAnimationFrame, o ile jest to możliwe, ponieważ właśnie do tego jest przeznaczony. Najlepiej jest use a shim for support, gdy nie jest, więc nie musisz zajmować się konkretnymi szczegółami.

Aby animacja lub logika gry działały z tą samą prędkością, pomimo rzeczywistej stosowanej metody, należy zastosować animację opartą na czasie i obliczenia w czasie dla fizyki.

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

użycie tej funkcji dla wszystkich przypadków