Animasjon med requestAnimationFrame
Bygg jevne canvas-animasjoner med animasjonsrammeløkken
Animasjon med requestAnimationFrame er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hvorfor requestAnimationFrame?
requestAnimationFrame (rAF) planlegger en callback før neste omtegning i nettleseren og synkroniserer animasjonen med skjermens oppdateringsfrekvens (vanligvis 60fps). I motsetning til setInterval pauses rAF når fanen er skjult, noe som sparer CPU og batteri.
Grunnleggende animasjonsløkke
En rAF-løkke: definer en animate-funksjon som tegner gjeldende frame, og kaller deretter requestAnimationFrame(animate) for å planlegge den neste. Nettleseren kaller animate før hver omtegning, slik at det oppstår en kontinuerlig animasjon med skjermens bildefrekvens.
function animate(timestamp) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// draw frame at current state
draw(timestamp);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);Parameteren timestamp
rAF sender et DOMHighResTimeStamp (millisekunder siden siden ble lastet inn) til callbacken. Bruk den til å beregne bevegelse som er uavhengig av bildefrekvensen: delta = timestamp - lastTimestamp. Multipliser hastigheten med delta for å flytte samme avstand per sekund, uavhengig av bildefrekvensen.
Bevegelse uavhengig av bildefrekvens
Beregn tiden som har gått siden forrige frame, og skaler bevegelsen tilsvarende. Et objekt som beveger seg med 100px/s, tilbakelegger 100 * (delta / 1000) piksler per frame. Dette sikrer konsistent fysikk på skjermer med 30fps og 144fps.
Stoppe animasjon
rAF returnerer et håndtak. Avbryt med cancelAnimationFrame(handle). Lagre håndtaket i en variabel, sjekk et running-flagg i løkken eller avbryt ved opprydding av komponenten. Avbryt alltid løkker når elementet fjernes fra DOM-en.
Mønster for canvas-animasjon
Hver frame: (1) tøm hele canvaset med clearRect, (2) oppdater tilstandsvariabler (posisjon, vinkel, tid), (3) tegn alle objekter på de nye posisjonene, (4) kall requestAnimationFrame for neste frame. Hopp aldri over clearRect – gamle frames hoper seg opp som et spor.
CSS-transisjoner kontra rAF
Bruk CSS-transisjoner og -animasjoner til enkle, egenskapsbaserte animasjoner (hover-effekter, innskyving av modaler). Bruk rAF til komplekse, interaktive animasjoner – spilløkker, fysikksimuleringer og canvas-gjengivelse – når det er behov for detaljert kontroll over hver frame.
Dobbelbuffering på canvas
For komplekse scener bør det først tegnes på et canvas utenfor skjermen, og deretter bør det brukes drawImage til å tegne det på det synlige canvaset i én operasjon. Dette hindrer flimring ved at et delvis tegnet bilde aldri vises – det synlige canvaset oppdateres atomisk i hver frame.
Begrense til målfrekvens
Begrens bildefrekvensen til en lavere verdi (for eksempel 30fps): kontroller om det har gått nok tid siden forrige tegning før gjengivelsen. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. Planlegg rAF uansett for å opprettholde responsiviteten.
Feilsøke animasjon
Chrome DevTools Performance-panelet registrerer rAF-callbacks i JS-flammegrafen. Se etter lange callbacks som overskrider 16ms – de fører til tapte frames. Bruk FPS-måleren (Rendering → FPS Meter) for å observere bildefrekvensen i sanntid under interaksjon.
Alternativet Web Animations API
For enklere deklarative animasjoner uten manuell tidsstyring: element.animate(keyframes, options). WAAPI håndterer tidsfunksjoner, fyllmoduser og iterasjoner – og overlater frameberegningen til nettleseren. Bruk rAF til egendefinert gjengivelseslogikk som WAAPI ikke kan uttrykke.
Kunnskapssjekk
Hvorfor bør animasjonshastigheten multipliseres med delta-tiden i en requestAnimationFrame-løkke?
Sammendrag
requestAnimationFrame synkroniserer JavaScript-animasjon med skjermens oppdateringsfrekvens og pauses i skjulte faner. Parameteren timestamp muliggjør bevegelse som er uavhengig av bildefrekvensen, ved å skalere med delta-tid. Mønsteret for canvas-animasjon (tøm, oppdater, tegn, planlegg), kombinert med cancelAnimationFrame for opprydding, danner grunnlaget for jevne og effektive webanimasjoner.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Animasjon med requestAnimationFrame» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Animasjon med requestAnimationFrame», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Animasjon med requestAnimationFrame»?
Bygg jevne canvas-animasjoner med animasjonsrammeløkken Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML Academy?
Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Animasjon med requestAnimationFrame»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?
Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Klargjøring av canvas og 2D-kontekst
- Tegning av rektangler og baner
- Tekst og bilder på canvas
- Animasjon med requestAnimationFrame