HTML Academy · Lektion

Animering med requestAnimationFrame

Bygg mjuka canvas-animeringar med bildruteloopen

Lektion 4 av 413 steg

Animering med requestAnimationFrame är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.

Varför requestAnimationFrame?

requestAnimationFrame (rAF) schemalägger en callback före webbläsarens nästa omritning och synkroniserar animeringen med skärmens uppdateringsfrekvens (vanligen 60 fps). Till skillnad från setInterval pausas rAF när fliken är dold, vilket sparar processorkraft och batteri.

Grundläggande animeringsloop

En rAF-loop: definiera en animate-funktion som ritar den aktuella bildrutan och sedan anropar requestAnimationFrame(animate) för att schemalägga nästa. Webbläsaren anropar animate före varje omritning, vilket skapar en kontinuerlig animering med skärmens bildfrekvens.

function animate(timestamp) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // draw frame at current state
  draw(timestamp);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Parametern timestamp

rAF skickar en DOMHighResTimeStamp (millisekunder sedan sidan lästes in) till callbacken. Använd den för att beräkna bildfrekvensoberoende rörelse: delta = timestamp - lastTimestamp. Multiplicera hastigheten med delta för att flytta samma sträcka per sekund oavsett bildfrekvens.

Rörelse oberoende av bildfrekvens

Beräkna den förflutna tiden sedan den senaste bildrutan och skala rörelsen därefter. Ett objekt som rör sig med 100px/s färdas 100 * (delta / 1000) pixlar per bildruta. Detta ger konsekvent fysik på skärmar med både 30 fps och 144 fps.

Stoppa animering

rAF returnerar ett handtag. Avbryt med cancelAnimationFrame(handle). Spara handtaget i en variabel, kontrollera en running-flagga i loopen eller avbryt vid komponentrensning. Avbryt alltid loopar när elementet tas bort från DOM-trädet.

Mönster för canvas-animering

Varje bildruta: (1) rensa hela canvasen med clearRect, (2) uppdatera tillståndsvariabler (position, vinkel, tid), (3) rita alla objekt på de nya positionerna, (4) anropa requestAnimationFrame för nästa bildruta. Hoppa aldrig över clearRect — äldre bildrutor samlas då som ett spår.

CSS-övergångar jämfört med rAF

Använd CSS-övergångar och CSS-animeringar för enkla, egenskapsbaserade animeringar (hovereffekter, infällning av modaler). Använd rAF för komplexa, interaktiva animeringar — spelloopar, fysiksimuleringar och canvas-rendering — där ni behöver detaljerad kontroll över varje bildruta.

Dubbelbuffring på canvas

För komplexa scener ritar ni först på en offscreen-canvas och ritar sedan den på den synliga canvasen med drawImage i en enda operation. Detta förhindrar flimmer genom att aldrig visa en delvis ritad bildruta — den synliga canvasen uppdateras atomärt i varje bildruta.

Begränsning till målfrekvens

Begränsa till en lägre bildfrekvens (t.ex. 30 fps): kontrollera om tillräckligt med tid har gått sedan den senaste ritningen innan ni renderar. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. Schemalägg rAF oavsett för att bibehålla responsiviteten.

Felsöka animering

Chrome DevTools-panelen Performance registrerar rAF-callbacks i JS-flamediagrammet. Leta efter långa callbacks som överskrider 16 ms — de orsakar tappade bildrutor. Använd FPS-mätaren (Rendering → FPS Meter) för att observera bildfrekvensen i realtid under interaktion.

Alternativet Web Animations API

För enklare deklarativa animeringar utan manuell tidsstyrning: element.animate(keyframes, options). WAAPI hanterar tidsfunktioner, fyllningslägen och iterationer — webbläsaren beräknar bildrutorna. Använd rAF för anpassad renderingslogik som WAAPI inte kan uttrycka.

Kunskapskontroll

Varför bör animeringens hastighet multipliceras med delta-tiden i en requestAnimationFrame-loop?

Besvara frågan i den interaktiva lektionen

Sammanfattning

requestAnimationFrame synkroniserar JavaScript-animering med skärmens uppdateringsfrekvens och pausas på dolda flikar. Parametern timestamp möjliggör bildfrekvensoberoende rörelse genom skalning med delta-tid. Mönstret för canvas-animeringsloopen (rensa, uppdatera, rita, schemalägg) tillsammans med cancelAnimationFrame för rensning utgör grunden för jämna och effektiva webbanimeringar.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Animering med requestAnimationFrame” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Animering med requestAnimationFrame”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Animering med requestAnimationFrame”?

Bygg mjuka canvas-animeringar med bildruteloopen Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig HTML Academy?

Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Animering med requestAnimationFrame”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här HTML Academy-lektionen?

Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till HTML Academy