Animation med requestAnimationFrame
Opret jævne canvas-animationer med animationsrammeløkken
Animation med requestAnimationFrame er en gratis HTML 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 HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvorfor bruge requestAnimationFrame?
requestAnimationFrame (rAF) planlægger en funktion før browserens næste gentegning og synkroniserer animationen med skærmens opdateringshastighed (typisk 60fps). I modsætning til setInterval sættes rAF på pause, når fanen er skjult, hvilket sparer CPU og batteri.
Grundlæggende animationsløkke
En rAF-løkke fungerer sådan: Definér en animate-funktion, der tegner det aktuelle billede, og kald derefter requestAnimationFrame(animate) for at planlægge det næste. Browseren kalder animate før hver gentegning, så der skabes en kontinuerlig animation med skærmens billedhastighed.
function animate(timestamp) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// draw frame at current state
draw(timestamp);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);Tidsstempelparameteren
rAF sender et DOMHighResTimeStamp (millisekunder siden siden blev indlæst) til funktionen. Brug det til at beregne bevægelse, der er uafhængig af billedhastigheden: delta = timestamp - lastTimestamp. Gang hastigheden med delta for at flytte den samme afstand pr. sekund uanset billedhastigheden.
Bevægelse uafhængig af billedhastigheden
Beregn den forløbne tid siden det forrige billede, og skalér bevægelsen tilsvarende. Et objekt, der bevæger sig med 100px/s, tilbagelægger 100 * (delta / 1000) pixels pr. billede. Det sikrer ensartet fysik på skærme med 30fps og 144fps.
Stop animationen
rAF returnerer en reference. Annullér den med cancelAnimationFrame(handle). Gem referencen i en variabel, kontrollér et kørende flag i løkken, eller annullér den under oprydning af en komponent. Annullér altid løkker, når elementet fjernes fra DOM'en.
Mønster for canvasanimation
For hvert billede: (1) ryd hele canvaset med clearRect, (2) opdatér tilstandsvariabler (position, vinkel, tid), (3) tegn alle objekter på deres nye positioner, (4) kald requestAnimationFrame for det næste billede. Spring aldrig clearRect over — ellers ophobes de gamle billeder som et spor.
CSS-overgange vs. rAF
Brug CSS-overgange og -animationer til enkle, egenskabsbaserede animationer (markøreffekter, indglidning af modaler). Brug rAF til komplekse, interaktive animationer — spilløkker, fysiksimuleringer og canvasgengivelse — hvor du har brug for detaljeret kontrol over hvert billede.
Dobbeltbuffering på Canvas
Tegn først komplekse scener på et canvas uden for skærmen, og tegn derefter det på det synlige canvas med drawImage i én operation. Det forhindrer flimren, fordi et delvist tegnet billede aldrig vises — det synlige canvas opdateres atomisk i hvert billede.
Begrænsning til mål-FPS
Begræns til en lavere billedhastighed (f.eks. 30fps): Kontrollér, om der er gået tilstrækkelig tid siden den seneste tegning, før du gengiver. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. Planlæg altid rAF for at bevare reaktionsevnen.
Fejlfinding af animation
Chrome DevTools-panelet Performance registrerer rAF-tilbagekald i JS-flammediagrammet. Se efter lange tilbagekald, der overstiger 16 ms — de forårsager tabte billeder. Brug FPS-måleren (Rendering → FPS Meter) til at følge billedhastigheden i realtid under interaktion.
Alternativet Web Animations API
Til enklere deklarative animationer uden manuel tidsstyring: element.animate(keyframes, options). WAAPI håndterer timingfunktioner, udfyldningstilstande og gentagelser og overlader beregningen af billeder til browseren. Brug rAF til brugerdefineret gengivelseslogik, som WAAPI ikke kan udtrykke.
Tjek din viden
Hvorfor skal animationshastigheden ganges med delta-tiden i en requestAnimationFrame-løkke?
Opsummering
requestAnimationFrame synkroniserer JavaScript-animation med skærmens opdateringshastighed og sættes på pause i skjulte faner. Tidsstempelparameteren muliggør bevægelse, der er uafhængig af billedhastigheden, ved hjælp af skalering efter delta-tid. Mønsteret for canvasanimation (ryd, opdatér, tegn, planlæg) kombineret med cancelAnimationFrame til oprydning danner grundlaget for jævne og effektive webanimationer.
Lær HTML 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
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Animation med requestAnimationFrame” gratis?
Ja — alle 3 lektioner i læringssporet HTML 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. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Animation med requestAnimationFrame”?
Opret jævne canvas-animationer med animationsrammeløkken Du øver dig i HTML 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å HTML Academy?
Der kræves ingen tidligere erfaring. HTML 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 HTML Academy-lektion?
Ja. Alle HTML 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
- Opsætning af canvas og 2D-kontekst
- Tegning af rektangler og kurver
- Tekst og billeder på canvas
- Animation med requestAnimationFrame