Dobro izvedena animacija može značajno poboljšati korisničko iskustvo, pružajući povratne informacije korisniku na vizuelno privlačan način. Svelte vam omogućava jednostavno integrisanje animacija i tranzicija u vaše aplikacije, sa minimalnom potrebom za eksternim JavaScript bibliotekama.
Kreiranje Svelte Projekta
Pre nego što počnete sa Svelte-om, uverite se da su Node.js runtime i Node Package Manager (NPM) ispravno instalirani na vašem sistemu. Otvorite terminal i pokrenite sledeću komandu:
npm create vite
Ovo će postaviti osnovnu strukturu za novi Vite.js projekat. Dajte ime svom projektu, odaberite Svelte kao okvir i postavite varijantu na JavaScript. Nakon toga, uđite u direktorijum projekta i pokrenite sledeću komandu da instalirate neophodne zavisnosti:
npm install
Uklonite početni kod brisanjem direktorijuma ‘assets’ i ‘lib’, kao i sadržaja datoteka App.svelte i App.css.
Kako Koristiti Tweening u Svelte-u
Tweening je tehnika u animaciji i računarskoj grafici koja stvara međuframove između ključnih kadrova kako bi se postiglo glatko i realistično kretanje ili tranzicije. Svelte pruža praktičan uslužni program koji omogućava animiranje elemenata pomoću numeričkih vrednosti, što olakšava kreiranje tečnih prelaza i animacija u vašim web aplikacijama.
Tweened uslužni program je deo modula `svelte/motion`. Da biste koristili `tweened` u komponenti, morate ga uvesti na sledeći način:
import { tweened } from 'svelte/motion'
Ispod haube, `tweened` uslužni program je zapravo Svelte store koji se može menjati. Svelte store je, u osnovi, JavaScript objekat koji se koristi za upravljanje stanjem. `Tweened` store ima dve metode: `set` i `update`. Na osnovnom nivou, sintaksa za `tweened` store izgleda otprilike ovako:
const y = tweened(defaultValue, {
duration: [time-in-milliseconds],
easing: [easing-function],
})
Gornji blok koda definiše promenljivu `y` i vezuje je za `tweened` store. Store ima dva parametra. Prvi parametar predstavlja podrazumevanu vrednost koju `y` treba da ima. Drugi parametar je objekat sa dva ključa: `duration` i `easing`. `Duration` određuje koliko dugo treba da traje tweeen u milisekundama, dok `easing` određuje funkciju ublažavanja.
Funkcije ublažavanja u Svelte-u definišu ponašanje tween-a. Ove funkcije su deo modula `svelte/easing`, što znači da morate uvesti određenu funkciju iz tog modula pre nego što je prosledite u `tweened` store. Svelte poseduje vizualizator ublažavanja koji vam može pomoći da istražite ponašanje različitih funkcija ublažavanja.
Da bismo u potpunosti ilustrovali kako koristiti `tweened` uslužni program, evo primera korišćenja `tweened` store-a za povećanje veličine elementa u Svelte-u.
<script>
import { tweened } from "svelte/motion";
import { bounceOut } from "svelte/easing";const size = tweened(0, {
easing:bounceOut
})
</script><div class="container">
<div style={`height: ${$size * 30}px;`}>
</div>
</div>
<button on:click={()=>(size.update(()=>$size+3))}>Increase size</button><style>
.container{
display: flex;
align-items: flex-end;
margin-top: 400px;
}
div{
height:0;
width:100px;
background-color: red;
}
</style>
Gornji kod uvozi dve funkcije: `tweened` i `bounceOut` iz modula `svelte/motion` i `svelte/easing`. Zatim, postoji konstantna promenljiva koja je vezana za `tweened` store. Ovaj store ima podrazumevanu vrednost `0`. Vrednosti store-a se pristupa pomoću simbola `$`. Sledeći parametar u `tweened` funkciji je objekat sa ključem `easing` koji pokazuje na `bounceOut` funkciju ublažavanja.
U odeljku za označavanje, element dugmeta ima `on:click` direktivu koja poziva metodu `update` na vezivanju `size`. Ova metoda povećava vrednost store-a `$size` za `3` svaki put kada se klikne na dugme. Element div ima inline stil koji zavisi od vrednosti store-a `$size`. Kada pokrenete ovaj kod u pretraživaču, trebalo bi da vidite:
Tranzicije u Svelte-u
Za prebacivanje elemenata u i van Document Object Model-a (DOM), Svelte poseduje direktivu za tranziciju i modul pod nazivom `svelte/transition` koji izvozi korisne funkcije koje se mogu koristiti sa direktivom za tranziciju. Na primer, za zamagljivanje elementa u i iz DOM-a, prvo uvezite funkciju `blur` iz `svelte/transition`:
<script>
import { blur } from 'svelte/transition';
</script>
Zatim dodajte funkcionalnost za montiranje i demontiranje elementa iz DOM-a. Unutar oznake script napravite promenljivu `visible` i postavite je na `false`.
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Zatim, koristite `if` blok da uslovno prikažete div. Obavezno dodajte direktivu `transition` na div i postavite je na `blur`.
{#if visible}
<div transition:blur>Here I am...</div>
{/if}
Zatim, dodajte dugme za prikaz ili skrivanje div-a.
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
Kada pokrenete kod u pregledaču, trebalo bi da vidite:
Modul `svelte/transition` izvozi sedam funkcija: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` i `crossfade`. Tranzicije u Svelte-u mogu da primaju parametre. Na primer, funkcija `blur` iz prethodnog primera može da primi sledeće parametre: `delay`, `duration`, `easing` (funkcija ublažavanja), `opacity` i `amount` (veličina zamućenja).
Pored parametara na tranzicijama, Svelte nudi i ulazne i izlazne tranzicije koje vam daju bolju kontrolu nad tranzicijom elementa. Razmotrite prethodni primer, šta ako želite da ulazna tranzicija elementa bude `blur`, a izlazna `slide`? Evo kako se to radi:
<script>
import { blur, slide } from 'svelte/transition';
let visible = false;
</script>{#if visible}
<div in:blur out:slide>Here I am...</div>
{/if}<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
U gornjem bloku koda, primetite da nema direktive `transition` na elementu div. Umesto toga, direktiva `transition` je zamenjena direktivama `in` i `out` koje pokazuju na `blur` i `slide`.
Animiranje Svelte Elemenata
Najpogodniji način za animiranje elemenata u Svelte-u je korišćenje funkcije `flip` iz `svelte/animate`. `flip` je skraćenica za „First, Last, Invert, Play“. Prihvata tri parametra: `delay`, `duration` i `easing`. Pogledajte sledeći kod:
<script>
import { flip } from "svelte/animate";
let originalList = ["Tomatoes", "Bread", "Fish", "Milk", "Cat food"];
let shoppingList = [...originalList];
</script><div class="container">
{#each shoppingList as item (item)}
{@const number = shoppingList.indexOf(item)}
<div animate:flip>
{number + 1}. {item}
</div>
{/each}
</div><button on:click={() => shoppingList = shoppingList.sort()}>Arrange</button>
<button on:click={() => shoppingList = [...originalList]}>Reset</button>
Blok koda ilustruje kako koristiti direktivu za animaciju u Svelte-u. U oznaci script, prvi red uvozi funkciju `flip`. Postoje dva niza, `originalList` i `shoppingList`. U div „container“, blok `each` je odgovoran za prikazivanje svakog elementa u nizu `shoppingList`.
Podređeni div diva „container“ ima direktivu `animate` koja ukazuje na funkciju `flip`. Pritiskom na prvo dugme, lista će se sortirati po abecedi, a pritiskom na drugo dugme, lista se resetuje. Kada pokrenete kod u pretraživaču, trebalo bi da vidite:
Zašto je Animacija Važna u Bilo kojoj Web Aplikaciji?
Značaj animacija prevazilazi čistu vizuelnu privlačnost; one obuhvataju suštinu poboljšanja korisničkog iskustva i efikasne komunikacije. Besprekornim spajanjem estetike sa funkcionalnošću, animacija udahnjuje život web aplikacijama, čineći ih ne samo privlačnim već i intuitivnim.