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 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, 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() 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 24
Full support 24
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support YesFirefox Full support 23
Notes
Full support 23
Notes
Notes Callback parameter is a DOMHighResTimestamp. This means ten microsecond precision and zero time as performance.now().
No support 11 — 42
Prefixed Notes
Prefixed Implemented with the vendor prefix: moz
Notes Callback parameter is a DOMTimestamp. This means millisecond precision and zero time as Date.now().
No support 4 — 11
Prefixed Notes
Prefixed Implemented with the vendor prefix: moz
Notes Could be called with no input parameters.
IE Full support 10Opera Full support 15
Full support 15
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: o
Safari Full support 6.1
Full support 6.1
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: webkit
WebView Android Full support YesChrome Android Full support 25
Full support 25
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Mobile Full support YesFirefox Android Full support 23
Full support 23
No support 14 — 42
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Full support 15Safari iOS Full support 7.1
Full support 7.1
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Samsung Internet Android ?
Return valueChrome Full support 23Edge Full support YesFirefox Full support 11IE Full support 10Opera Full support 15Safari Full support 6.1WebView Android Full support YesChrome Android Full support 25Edge Mobile Full support YesFirefox Android Full support 14Opera Android Full support 15Safari iOS Full support 6.1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Leggi anche

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: frappacchio
Ultima modifica di: frappacchio,