Come faccio a riprodurre un'animazione JavaScript alla stessa velocità su tutti i browser su tutti i sistemi?

Question

Ho una funzione che calcola il fotogramma successivo in un'animazione di vari oggetti che si muovono sia nell'asse X che nell'asse Y [lo chiamo frameRender()] e una funzione che applica il fotogramma risultante agli oggetti [Io chiamo lo frameDisplay()]. Gli oggetti non si spostano semplicemente dal punto A al punto B, si spostano costantemente, ricevendo sempre nuove coordinate obiettivo. Io uso un setInterval() con un intervallo 1000/frameRate ma non sembra funzionare affatto in quanto i browser non hanno tempi precisi.

La domanda è: come posso assicurarmi che l'animazione abbia una frequenza fotogrammi costante e funzionerà alla stessa velocità su tutti i browser, su tutti i sistemi? Ho provato tutto e non riesco a ottenere un risultato accurato anche su browser diversi (eseguo test su Firefox e Chrome, Chrome di solito visualizza molto più velocemente).

Il risultato dovrebbe essere: Quando viene riprodotto lentamente, l'intervallo di animazione dovrebbe diminuire a prima, e poi cercare di saltare alcuni fotogrammi [saltando frameDisplay()] se il DOM visualizza lento, finché non viene riprodotto correttamente. Quando suona velocemente, l'intervallo di animazione dovrebbe aumentare, rendendo l'animazione riprodotta alla velocità corretta.

Ma come mantenere la coerenza in tutto questo, dal momento che non si può essere sempre sicuri quando i browser diventeranno lenti o quando si esibiranno velocemente. Per esempio, se c'è un enorme picco di movimenti, e diminuiamo l'intervallo per mantenere il frame rate costante, e poi improvvisamente la maggior parte degli oggetti in movimento si fermano o non si muovono molto, improvvisamente si esibiranno molto velocemente!

Qualche idea?

Answer 1

La risposta is here, un grande articolo di Glenn Fiedler, ha bisogno di un piccolo ritocco per convertirlo in Javascript, ma i principi sono gli stessi. Fondamentalmente, è necessario utilizzare un accumulatore che somma le tempistiche delta ed esegua passi basati su questo. Non c'è bisogno di cambiare matematica fisica o altro, la soluzione è plug and play. Ha anche un ottimo interpolatore che rimuove la balbuzie e ti permette anche di fare movimenti lisci super slow (per i replay ecc.). È fantastico, funziona per la fisica e dovrebbe funzionare su qualsiasi movimento basato su step. Fondamentalmente, tutto ciò che serve per un movimento preciso del gioco di temporizzazione è lì.

Answer 2

La domanda è: come posso essere sicuro che l'animazione abbia una frequenza di fotogrammi costante e funzionerà alla stessa velocità su tutti i browser, su tutti i sistemi?

Non si può fare nulla per il framerate. L'unica cosa che puoi controllare è il modo in cui l'applicazione si aggiorna in base al tempo trascorso. Questo è vero anche al di fuori dei browser e un argomento comune nello sviluppo del gioco.

La cosa migliore da fare è tenere traccia del delta (leggi: differenza di orario) tra gli aggiornamenti.

(function() { 
    function getTime() { 
     return new Date().getTime(); 
    } 
    var last = getTime(); 

    function update(delta) { 
     // Update your application state on delta (ms of time passed) 
    } 

    (function loop() { 
     update(last = getTime()-last); 
     render(); 
     setTimeout(loop, 20); // 20 = attempt 50fps 
    }()); 
}()); 

Avviso l'uso di setTimeout qui. Questo per evitare che il loop() venga chiamato fuori sincrono. setInterval continuerà a farlo anche se una chiamata precedente non è terminata.

Answer 3

È possibile sincronizzare l'animazione con l'ora del sistema.

Salva l'ora di sistema corrente nella variabile. Su tutti i fotogrammi, quindi, si desidera ridisegnare il controllo dell'immagine se il tempo corrente - la variabile è uguale a qualche delta. quindi redrow la tua animazione. altrimenti aspetta questa differenza