JavaScript Animacije

Sodobni spletni razvoj poleg statičnega izpisa podatkov zahteva tudi vizualno dinamiko. Z JavaScript animacijami lahko dosežemo, da se elementi na strani gladko premikajo, spreminjajo velikost, bledijo ali reagirajo na uporabnikove klike. Čeprav lahko veliko animacij naredimo s CSS-jem, nam JavaScript ponuja popoln programski nadzor – animacijo lahko zaženemo ob natančnem dogodku, jo ustavimo, obrnemo ali pa spremenimo njeno hitrost glede na vnos uporabnika.

Sodobni način: Web Animations API

Najsodobnejši in najbolj učinkovit način za animiranje elementov v čistem JavaScriptu je uporaba metode element.animate(). Ta metoda deluje neposredno z brskalnikom in omogoča enako hitrost in gladkost kot CSS prehodi, vendar z vsemi prednostmi JavaScript nadzora.

Metoda sprejme dva ključna argumenta:

1. Polje korakov (Keyframes): Seznam objektov, kjer vsak objekt predstavlja eno stanje elementa (od začetka do konca).
2. Objekt z nastavitvami (Options): Nastavitve, kot so trajanje v milisekundah (duration), način prehoda (easing) in število ponovitev.

Struktura in sintaksa kode

Poglejmo si preprost primer, kako element premakniti in mu hkrati spremeniti prosojnost. To vrstico kode običajno sprožimo znotraj neke funkcije ob kliku:

element.animate([
    // 1. korak: Začetno stanje
    { opacity: 0, transform: "translateY(-20px)" },
    // 2. korak: Končno stanje
    { opacity: 1, transform: "translateY(0)" }
], {
    // Nastavitve animacije
    duration: 400, // Trajanje: 400 milisekund
    easing: "ease-out" // Gladko upočasnjevanje na koncu
});

Kdaj uporabiti CSS in kdaj JavaScript?

Za uspešen razvoj je pomembno vedeti, katero orodje izbrati za določeno nalogo:

Tehnologija	Najbolj primerno za...	Prednosti
CSS Transitions / Keyframes	Preproste interakcije, kot so barvni prehodi ob lebdenju miške, preprosti gumbi in vrtljivi gumbi za nalaganje.	Izjemno hitro delovanje, manj kode, brskalnik jo optimizira avtomatsko.
JavaScript (animate())	Kompleksne animacije, veriženje učinkov (ko se ena animacija konča, se začne druga), premikanje elementov glede na pozicijo miške ali dinamični simulatorji.	Popoln programski nadzor (start, pause, reverse), možnost spremljanja konca animacije prek dogodkov (Promises).

Nadzor nad potekom in dogodki animacije (Cheat Sheet)

Ko v JavaScriptu zaženete animacijo z metodo animate(), ta vrne **objekt animacije (Animation object)**. Preko tega objekta lahko animacijo kadarkoli programsko ustavite, jo začasno prekinete ali pa ulovite dogodek, ko se uspešno zaključi.

Metoda / Lastnost	Tip / Opis	Sintaksa / Primer uporabe
1. Programsko upravljanje poteka (Metode)
play()	Zažene ali nadaljuje začasno ustavljeno animacijo.	mojaAnimacija.play();
pause()	Začasno zamrzne animacijo na trenutnem posnetku (koraku).	mojaAnimacija.pause();
finish()	Takoj skoči na čisto zadnji korak animacije in jo zaključi.	mojaAnimacija.finish();
cancel()	Prekliče animacijo in element takoj vrne v prvotno (izvirno) stanje.	mojaAnimacija.cancel();
reverse()	Obrne smer izvajanja animacije in jo predvaja nazaj proti začetku.	mojaAnimacija.reverse();
2. Lovljenje dogodkov in stanja (Events & Promises)
playState	Lastnost, ki vrne trenutno stanje (npr. "running", "paused", "finished", "idle").	if (mojaAnimacija.playState === 'paused') { ... }
onfinish	Dogodek, ki se sproži v milisekundi, ko se animacija naravno zaključi.	mojaAnimacija.onfinish = function() { alert('Konec!'); };
finished (Promise)	Sodobnejši način, ki omogoča veriženje kode (asinhrono čakanje na konec animacije).	mojaAnimacija.finished.then(() => { ... });
oncancel	Dogodek, ki se sproži, če animacijo nasilno prekinemo z metodo cancel().	mojaAnimacija.oncancel = function() { ... };

Povezava s CSS dogodki: Če bi namesto Web Animations API-ja uporabljali klasične CSS animacije prek razredov, bi te dogodke v JavaScriptu lovili z običajnimi poslušalci dogodkov, kot so element.addEventListener('animationend', ...);, animationstart ali animationiteration (ko se animacija ponovi).