JavaScript Academy · Lektion

Animation med requestAnimationFrame

Opret jævne canvas-animationer.

Lektion 4 af 413 trin

Animation med requestAnimationFrame er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvorfor requestAnimationFrame?

requestAnimationFrame(callback) planlægger din tegnefunktion til at køre før den næste gentegning af skærmen — typisk 60 gange i sekundet. Den sættes på pause i baggrundsfaner, så CPU og batteri spares, i modsætning til setInterval.

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

Den grundlæggende løkke

En animationsløkke rydder canvaset, opdaterer tilstanden, tegner og planlægger derefter sig selv igen.

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);

Rydning af hvert billede

Uden clearRect bliver det forrige billede stående, og du får spor. Ryd hele bufferen øverst i hvert billede for at tegne det hele rent igen.

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

Tidsstempelargumentet

Callbacken modtager et tidsstempel med høj opløsning (millisekunder). Brug det til at beregne den forløbne tid mellem frames.

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

Bevægelse uafhængig af billedhastigheden

Gang hastigheden med tidsdeltaet, så bevægelseshastigheden er ens uanset billedhastigheden.

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);
}

Få en bold til at hoppe

Vend hastigheden, når objektet rammer en kant, så det hopper.

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

Stop løkken

requestAnimationFrame returnerer et id. Videregiv det til cancelAnimationFrame for at stoppe animationen.

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

Sæt på pause og genoptag

Hold styr på et flag, der angiver, om animationen kører. For at genoptage skal du anmode om en ny frame; for at sætte den på pause skal du blot stoppe med at anmode eller annullere den afventende frame.

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

Animer flere objekter

Gem objekterne i et array, og opdatér hvert objekt inde i løkken.

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 til jævn bevægelse

Interpolér mod et mål med easing for at opnå en naturlig deceleration.

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

Tip til ydeevne

Undgå at allokere objekter inde i løkken, gruppér tegnekald, og tegn kun det, der er ændret, når det er muligt. Hold arbejdet pr. frame på et lavt niveau, så du holder dig under budgettet på ~16 ms ved 60 fps.

Hurtigt tjek

Test din viden om animation.

Besvar den i den interaktive lektion

Opsummering: Animation

Du byggede animationsløkker med requestAnimationFrame, ryddede hver frame med clearRect, brugte tidsstemplet til at gøre animationen uafhængig af billedhastigheden, animerede hoppende bolde og flere objekter, anvendte easing og lærte at stoppe eller sætte animationen på pause med cancelAnimationFrame.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Animation med requestAnimationFrame” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Animation med requestAnimationFrame”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Animation med requestAnimationFrame”?

Opret jævne canvas-animationer. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Animation med requestAnimationFrame”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy