Animazioni con requestAnimationFrame

requestAnimationFrame (rAF) pianifica una callback prima del successivo ridisegno del browser, sincronizzando l'animazione con la frequenza di aggiornamento dello schermo (in genere 60 fps). A differenza di setInterval, rAF si mette in pausa quando la scheda è nascosta, risparmiando CPU e batteria.

Un ciclo rAF: definisca una funzione animate che disegna il fotogramma corrente, quindi chiami requestAnimationFrame(animate) per pianificare il successivo. Il browser chiama animate prima di ogni ridisegno, creando un'animazione continua alla frequenza dei fotogrammi dello schermo.

rAF passa un DOMHighResTimeStamp (millisecondi dall'avvio del caricamento della pagina) alla callback. Lo utilizzi per calcolare un movimento indipendente dalla frequenza dei fotogrammi: delta = timestamp - lastTimestamp. Moltiplichi la velocità per delta per spostare la stessa distanza al secondo, indipendentemente dalla frequenza dei fotogrammi.

Calcoli il tempo trascorso dall'ultimo fotogramma e ridimensioni di conseguenza lo spostamento. Un oggetto che si muove a 100px/s percorre 100 * (delta / 1000) pixel per fotogramma. In questo modo la fisica rimane coerente su schermi a 30 fps e a 144 fps.

rAF restituisce un handle. Lo annulli con cancelAnimationFrame(handle). Memorizzi l'handle in una variabile, controlli un flag running all'interno del ciclo oppure annulli l'animazione durante la pulizia del componente. Annulli sempre i cicli quando l'elemento viene rimosso dal DOM.

A ogni fotogramma: (1) applichi clearRect all'intero canvas, (2) aggiorni le variabili di stato (posizione, angolo, tempo), (3) disegni tutti gli oggetti nelle nuove posizioni, (4) chiami requestAnimationFrame per il fotogramma successivo. Non salti mai clearRect: i fotogrammi precedenti si accumulerebbero creando una scia.

Utilizzi transizioni e animazioni CSS per animazioni semplici basate sulle proprietà (effetti al passaggio del mouse, ingresso laterale di una finestra modale). Utilizzi rAF per animazioni complesse e interattive — cicli di gioco, simulazioni fisiche, rendering su canvas — quando è necessario un controllo dettagliato su ogni fotogramma.

Per scene complesse, disegni prima su un canvas fuori schermo, quindi utilizzi drawImage per disegnarlo sul canvas visibile con una sola operazione. In questo modo evita lo sfarfallio, perché non mostra mai un fotogramma disegnato solo parzialmente: il canvas visibile si aggiorna atomicamente a ogni fotogramma.

Limiti la frequenza a un valore inferiore (ad esempio 30 fps): verifichi che sia trascorso tempo sufficiente dall'ultimo disegno prima di eseguire il rendering. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. Pianifichi comunque rAF per mantenere la reattività.

Il pannello Performance di Chrome DevTools registra le callback rAF nel flame chart JavaScript. Cerchi callback lunghe oltre 16 ms: causano la perdita di fotogrammi. Utilizzi il misuratore FPS (Rendering → FPS Meter) per osservare la frequenza dei fotogrammi in tempo reale durante l'interazione.

Per animazioni dichiarative più semplici senza gestire manualmente i tempi: element.animate(keyframes, options). WAAPI gestisce funzioni temporali, modalità di riempimento e iterazioni, delegando al browser il calcolo dei fotogrammi. Utilizzi rAF per la logica di rendering personalizzata che WAAPI non è in grado di esprimere.

Perché la velocità dell'animazione dovrebbe essere moltiplicata per il delta temporale in un ciclo requestAnimationFrame?

requestAnimationFrame sincronizza le animazioni JavaScript con la frequenza di aggiornamento dello schermo e si mette in pausa nelle schede nascoste. Il parametro timestamp consente un movimento indipendente dalla frequenza dei fotogrammi tramite il ridimensionamento basato sul delta temporale. Lo schema del ciclo di animazione su canvas (cancellare, aggiornare, disegnare, pianificare), combinato con cancelAnimationFrame per la pulizia, costituisce la base per animazioni web fluide ed efficienti.