JavaScript Academy · Lezione

Animazioni con requestAnimationFrame

Crei animazioni fluide sul canvas.

Animazioni con requestAnimationFrame è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Perché requestAnimationFrame?

requestAnimationFrame(callback) programma l'esecuzione della funzione di disegno prima del successivo aggiornamento dello schermo, in genere 60 volte al secondo. Si mette in pausa nelle schede in background, risparmiando CPU e batteria, a differenza di setInterval.

function frame() {
  // draw one frame
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

Il ciclo di base

Un ciclo di animazione cancella il canvas, aggiorna lo stato, disegna e quindi programma nuovamente se stesso.

let x = 0;
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 30, 30);
  x += 2;
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Cancellare ogni fotogramma

Senza clearRect, il fotogramma precedente rimane visualizzato e si formano scie. Cancelli l'intero buffer all'inizio di ogni fotogramma per ridisegnare l'immagine in modo pulito.

ctx.clearRect(0, 0, canvas.width, canvas.height);

L'argomento timestamp

Il callback riceve un timestamp ad alta risoluzione (in millisecondi). Lo utilizzi per calcolare il tempo trascorso tra i fotogrammi.

let last = 0;
function loop(now) {
  const dt = now - last;
  last = now;
  // dt = ms since previous frame
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Movimento indipendente dalla frequenza dei fotogrammi

Moltiplichi la velocità per il tempo delta, così la velocità del movimento rimane costante indipendentemente dalla frequenza dei fotogrammi.

let x = 0;
const speed = 0.1; // px per ms
function loop(now) {
  const dt = now - (loop.last || now);
  loop.last = now;
  x += speed * dt;
  requestAnimationFrame(loop);
}

Far rimbalzare una pallina

Inverta la velocità quando l'oggetto raggiunge un bordo per farlo rimbalzare.

let x = 50, vx = 3;
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x += vx;
  if (x < 0 || x > canvas.width) vx = -vx;
  ctx.beginPath();
  ctx.arc(x, 75, 15, 0, Math.PI * 2);
  ctx.fill();
  requestAnimationFrame(loop);
}
loop();

Arrestare il loop

requestAnimationFrame restituisce un ID. Lo passi a cancelAnimationFrame per interrompere l'animazione.

let id;
function loop() {
  id = requestAnimationFrame(loop);
}
id = requestAnimationFrame(loop);
// later:
cancelAnimationFrame(id);

Mettere in pausa e riprendere

Tenga traccia di un flag di esecuzione. Per riprendere, richieda un nuovo frame; per mettere in pausa, smetta semplicemente di richiederli (oppure annulli quello in attesa).

let running = true;
function loop() {
  if (!running) return;
  // draw...
  requestAnimationFrame(loop);
}
function pause() { running = false; }
function resume() { running = true; requestAnimationFrame(loop); }

Animare più oggetti

Memorizzi gli oggetti in un array e aggiorni ciascuno di essi all'interno del loop.

const balls = [{ x: 10, vx: 2 }, { x: 80, vx: -3 }];
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (const b of balls) {
    b.x += b.vx;
    ctx.fillRect(b.x, 60, 20, 20);
  }
  requestAnimationFrame(loop);
}
loop();

Easing per un movimento fluido

Interpoli verso una destinazione utilizzando l'easing per ottenere una decelerazione naturale.

let x = 0;
const target = 200;
function loop() {
  x += (target - x) * 0.1; // ease out
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 30, 30);
  if (Math.abs(target - x) > 0.5) requestAnimationFrame(loop);
}
loop();

Suggerimenti sulle prestazioni

Eviti di allocare oggetti all'interno del loop, raggruppi le chiamate di disegno e, quando possibile, ridisegni solo ciò che è cambiato. Mantenga ridotto il lavoro per ogni frame per rimanere al di sotto del budget di circa 16 ms a 60fps.

Verifica rapida

Verifichi le Sue conoscenze sull'animazione.

Riepilogo: animazione

Ha creato loop di animazione con requestAnimationFrame, cancellato ogni frame con clearRect, utilizzato il timestamp per rendere l'animazione indipendente dalla frequenza dei fotogrammi, animato palline rimbalzanti e più oggetti, applicato l'easing e imparato ad arrestare o mettere in pausa l'animazione con cancelAnimationFrame.

Domande Frequenti

La lezione «Animazioni con requestAnimationFrame» è gratuita?

Sì — il testo completo di «Animazioni con requestAnimationFrame» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Animazioni con requestAnimationFrame»?

Crei animazioni fluide sul canvas. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Animazioni con requestAnimationFrame»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy