Animasjonstiming — innføring med tidsbaserte løkker
Bygg en liten animasjonsløkke, bruk tidsbaserte (delta-)oppdateringer, simuler requestAnimationFrame og legg til en enkel easing.
Animasjonstiming — innføring med tidsbaserte løkker er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 3 av 3. 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 JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 3 leksjoner.
Hvorfor tidsbasert animasjon?
Mål: Styr jevn bevegelse med tidsbaserte oppdateringer.
- Simuler requestAnimationFrame
- Mål tidsdifferansen
- Flytt med enheter per sekund
- Legg til litt easing
Simulert rAF
Det finnes ingen DOM her, så vi simulerer requestAnimationFrame ved hjelp av setTimeout med omtrent 16 ms.
// requestFrame: simulate ~60 FPS with setTimeout
function requestFrame(fn) {
// ~16ms between frames for ~60fps
return setTimeout(function () { fn(Date.now()); }, 16);
}
function cancelFrame(id) {
clearTimeout(id);
}
// Tiny demo: schedule one frame
requestFrame(function (ts) {
console.log("frame at", ts);
});
Grunnleggende om tidsdifferanse
Beregn tidsdifferansen for hver ramme: (now − last) / 1000. Da skaleres bevegelsen etter den faktiske tiden.
// Time-based loop: compute delta time in seconds
let running = true;
let last = Date.now();
function loop() {
if (!running) { return; }
const now = Date.now();
const dt = (now - last) / 1000; // seconds
last = now;
// Print a tiny delta preview
console.log("dt", dt.toFixed(3), "s");
requestFrame(loop);
}
// Start the loop and stop after a few frames
loop();
setTimeout(function () {
running = false;
console.log("stop");
}, 60);
Enheter per sekund
Bruk speed × dt til å oppdatere posisjonen, slik at bevegelsen forblir jevn ved ulike bildefrekvenser.
// Move with a speed in units/second
let x = 0; // position
const speed = 50; // units per second
let lastT = Date.now();
let frames = 0;
function moveLoop() {
const now = Date.now();
const dt = (now - lastT) / 1000;
lastT = now;
// Distance = speed * time
x = x + speed * dt;
frames = frames + 1;
console.log("x", Math.round(x));
if (frames < 5) {
requestFrame(moveLoop);
} else {
console.log("final x", Math.round(x));
}
}
moveLoop();
Lite eksempel på easing
Easing former kurven. Her starter easeOutQuad raskt og sakker ned mot slutten.
// Ease from 0 to 1 over duration using easeOutQuad
function easeOutQuad(t) {
// t in [0,1]
return 1 - (1 - t) * (1 - t);
}
async function tween(durationMs) {
let start = Date.now();
let id = null;
function step() {
const now = Date.now();
const t = Math.min(1, (now - start) / durationMs);
const eased = easeOutQuad(t);
console.log("eased", eased.toFixed(2));
if (t < 1) {
id = requestFrame(step);
} else {
cancelFrame(id);
console.log("done");
}
}
step();
}
tween(60);
Smakebit på fast tidssteg
Et fast tidssteg kan stabilisere logikken. Accumulator tar igjen det tapte hvis en ramme blir forsinket.
// Fixed-step taste: step a physics tick and catch up using an accumulator
let acc = 0; // accumulated time
const step = 1 / 30; // 30 FPS fixed step in seconds
let lastTime = Date.now();
let value = 0;
let fixedFrames = 0;
function fixedLoop() {
const now = Date.now();
const dt = (now - lastTime) / 1000;
lastTime = now;
acc = acc + dt;
// Run zero or more fixed steps to catch up
while (acc >= step) {
// Update logic at a fixed rate
value = value + 1; // pretend physics
acc = acc - step;
}
console.log("value", value);
fixedFrames = fixedFrames + 1;
if (fixedFrames < 5) {
requestFrame(fixedLoop);
} else {
console.log("fixed stop");
}
}
fixedLoop();
Quiz om tidsdifferanse og faste tidssteg
Kort sjekk: Hvorfor tidsdifferanse?
Oppsummering
Oppsummering: De simulerte rAF med setTimeout, målte tidsdifferansen, flyttet med enheter per sekund, la til en ease-out og så en smakebit på faste tidssteg med en accumulator.
Lær deg JavaScript 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
- 59
- Leksjoner
- 200
Ofte stilte spørsmål
Er leksjonen «Animasjonstiming — innføring med tidsbaserte løkker» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Animasjonstiming — innføring med tidsbaserte løkker», 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 JavaScript Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Animasjonstiming — innføring med tidsbaserte løkker»?
Bygg en liten animasjonsløkke, bruk tidsbaserte (delta-)oppdateringer, simuler requestAnimationFrame og legg til en enkel easing. Du øver på JavaScript 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 JavaScript Academy?
Ingen tidligere erfaring er nødvendig. JavaScript 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 3 av 3.
Hvor lang tid tar leksjonen «Animasjonstiming — innføring med tidsbaserte løkker»?
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 JavaScript Academy-leksjonen?
Ja. Alle JavaScript 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
- setTimeout, setInterval og tidsdrift
- Debounce kontra throttle — laget fra grunnen av
- Animasjonstiming — innføring med tidsbaserte løkker