Temporizzazione delle animazioni — introduzione ai loop basati sul tempo
Costruisci un piccolo loop di animazione, usi aggiornamenti basati sul tempo (delta), simuli requestAnimationFrame e aggiungi un semplice easing.
Temporizzazione delle animazioni — introduzione ai loop basati sul tempo è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 3 lezioni in totale.
Perché un'animazione basata sul tempo?
Obiettivo: gestire movimenti fluidi con aggiornamenti basati sul tempo.
- Simulare requestAnimationFrame
- Misurare il delta time
- Muoversi a unità al secondo
- Aggiungere un piccolo easing
rAF simulato
Poiché qui non c'è il DOM, simuliamo requestAnimationFrame usando setTimeout con intervalli di circa 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);
});
Basi del delta time
Calcoli il delta time a ogni frame: (now − last) / 1000. In questo modo il movimento viene adattato al tempo reale.
// 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);
Unità al secondo
Utilizzi speed × dt per aggiornare la posizione, così il movimento rimane coerente a diverse frequenze dei fotogrammi.
// 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();
Dimostrazione di un piccolo easing
Easing definisce la curva. In questo caso easeOutQuad inizia rapidamente e rallenta verso la fine.
// 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);
Un assaggio del passo fisso
Un passo fisso può stabilizzare la logica; l'accumulatore recupera il ritardo se un frame arriva in ritardo.
// 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 su delta e passo fisso
Verifica rapida: perché usare il delta time?
Riepilogo
Riepilogo: ha simulato rAF con setTimeout, ha misurato il delta time, si è mosso a unità al secondo, ha aggiunto un ease-out e ha visto un esempio di passo fisso con un accumulatore.
Domande Frequenti
La lezione «Temporizzazione delle animazioni — introduzione ai loop basati sul tempo» è gratuita?
Sì — il testo completo di «Temporizzazione delle animazioni — introduzione ai loop basati sul tempo» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 3 lezioni in totale.
Cosa imparerò in «Temporizzazione delle animazioni — introduzione ai loop basati sul tempo»?
Costruisci un piccolo loop di animazione, usi aggiornamenti basati sul tempo (delta), simuli requestAnimationFrame e aggiungi un semplice easing. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.
Quanto tempo richiede la lezione «Temporizzazione delle animazioni — introduzione ai loop basati sul tempo»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?
Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- setTimeout, setInterval e deriva dei timer
- Debounce e throttle — implementazione manuale
- Temporizzazione delle animazioni — introduzione ai loop basati sul tempo