window.requestAnimationFrame()

Il metodo window.requestAnimationFrame()indica al browser che intendi eseguire un'animazione e desideri che il browser richiami una funzione specifica per aggiornare un'animazione prima che venga eseguito nuovamente il render del browser. Il metodo accetta una funzione di callback come argomento che verrà eseguita prima del nuovo render del browser.

Nota: la funzione di callback deve chiamare a sua volta requestAnimationFrame() se vuoi animare un'altro frame alla successiva azione di render del browser.

Dovresti chiamare questo metodo ogni qualvolta intendi aggiornare lo stato della tua animazione sul monitor. In questo modo la tua richiesta verrà eseguita prima che il browser esegua nuvamente il render della pagina. Il numero di esecuzioni della callback è generalmente di 60 volte al secondo, ma di solito rispetta il refresh-rate del display per quasi tutti i browser secondo le raccomandazioni W3C.
L'esecuzione di requestAnimationFrame() vengono messe in pausa in quasi tutti i browser quando la pagina è eseguita in un tab non visibile on in un <iframe> non visibile in modo da migliorare le performance e l'utilizzo della batteria.

Alla funzione di callback viene passato come singolo argomento il parametro DOMHighResTimeStamp (en-US) che indica i momento corrente in cui viene eseguito dalla coda di requestAnimationFrame()
Nel caso di callback multiple in un singolo frame, ogni funzione riceve lo stesso timestamp anche se è trascorso del tempo durante il calcolo di ogni processo.
Il timestamp è un numero decimale, in millisecondi, con una precisione di 1ms (1000µs).

Sintassi

window.requestAnimationFrame(callback);

Parametri

callback: Il parametro che specifica la funzione di callback da richiamare prima che venga eseguito il render successivo della pagina.
La funzione accetta un solo parametro, DOMHighResTimeStamp (en-US), che indica il momento esatto (nel formato performance.now()) in cui requestAnimationFrame() inizia la sua esecuzione.

Valori di ritorno

Un valore intero di tipo long, l'id della richiesta che identifica univocamente la callback specifica nella lista di callback. Questo è un valore assoluto, ma non dovresti fare nessun tipo di ragionamento sulla base di questo valore. Puoi, però, usare questo valore per passarlo a window.cancelAnimationFrame() (en-US) in modo da rimuovere/cancellare la callback dalla coda di richieste da eseguire.

Esempio

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

Specifiche

Specifica	Stato	Commento
HTML Living Standard The definition of 'requestAnimationFrame' in that specification.	Living Standard	Nessun cambiamento. Sostituisce il precedente.
Timing control for script-based animations The definition of 'requestAnimationFrame' in that specification.	Obsolete	Definizione iniziale

Compatibilità del Browser

BCD tables only load in the browser