Animaation ajoitus — johdatus aikaperustaisiin silmukoihin
Rakenna pieni animaatiosilmukka, käytä aikaperustaisia (delta) päivityksiä, jäljittele requestAnimationFramea ja lisää yksinkertainen easing
Animaation ajoitus — johdatus aikaperustaisiin silmukoihin on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/3. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 3 oppituntia.
Miksi aikaan perustuva animaatio?
Tavoite: Ohjatkaa sujuvaa liikettä aikaan perustuvilla päivityksillä.
- Simuloikaa requestAnimationFrame-toimintoa
- Mitatkaa delta time
- Liikuttakaa yksikköä sekunnissa
- Lisätkää pieni easing
Simuloitu rAF
Täällä ei ole DOMia, joten simuloimme requestAnimationFrame-toimintoa käyttämällä setTimeout-funktiota noin 16 millisekunnin välein.
// 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);
});
Delta timen perusteet
Laskekaa jokaisella kehyksellä delta time: (now − last) / 1000. Näin liike skaalautuu todellisen ajan mukaan.
// 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);
Yksikköä sekunnissa
Käyttäkää sijainnin päivittämiseen arvoa speed × dt, jotta liike pysyy yhdenmukaisena eri kuvataajuuksilla.
// 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();
Pieni easing-esimerkki
Easing muotoilee käyrää. Tässä easeOutQuad alkaa nopeasti ja hidastuu loppua kohti.
// 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);
Kiinteän askeleen kokeilu
Kiinteä askel voi vakauttaa logiikkaa. Accumulator ottaa kiinni myöhästyneen kehyksen aiheuttaman viiveen.
// 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();
Delta timen ja kiinteän askeleen koe
Pikatarkistus: Miksi delta time?
Kertaus
Kertaus: Simuloitte rAF-toiminnon setTimeout-funktiolla, mittasitte delta timen, liikutitte yksikköä sekunnissa, lisäsitte ease-outin ja tutustuitte kiinteään askeleeseen accumulatorin avulla.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 59
- Oppitunnit
- 200
Usein kysytyt kysymykset
Onko oppitunti ”Animaation ajoitus — johdatus aikaperustaisiin silmukoihin” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Animaation ajoitus — johdatus aikaperustaisiin silmukoihin”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 3 oppituntia.
Mitä opin oppitunnilla ”Animaation ajoitus — johdatus aikaperustaisiin silmukoihin”?
Rakenna pieni animaatiosilmukka, käytä aikaperustaisia (delta) päivityksiä, jäljittele requestAnimationFramea ja lisää yksinkertainen easing Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/3.
Kuinka kauan ”Animaation ajoitus — johdatus aikaperustaisiin silmukoihin”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?
Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- setTimeout, setInterval ja ajastinten ajautuminen
- Debounce ja throttle — toteutus itse
- Animaation ajoitus — johdatus aikaperustaisiin silmukoihin