O animație bine realizată poate eleva experiența utilizatorului și oferi feedback valoros. Svelte facilitează integrarea animațiilor și tranzițiilor în aplicația ta, reducând dependența de biblioteci JavaScript externe.
Inițierea unui proiect Svelte
Pentru a începe să utilizezi Svelte, asigură-te că ai instalate Node.js și Node Package Manager (NPM). Deschide terminalul și rulează comanda:
npm create vite
Aceasta va genera un nou proiect Vite.js. Denumește proiectul, alege Svelte ca framework și setează varianta pe JavaScript. Apoi, navighează către directorul proiectului și rulează comanda de mai jos pentru a instala dependențele necesare:
npm install
Elimină codul standard prin ștergerea folderelor assets și lib, precum și a conținutului fișierelor App.svelte și App.css.
Utilizarea Interpolării (Tweening) în Svelte
Tweening este o tehnică din animație care creează cadre intermediare între cadre cheie, rezultând în mișcări sau tranziții fluente. Svelte oferă un instrument de interpolare care permite animarea elementelor folosind valori numerice, simplificând crearea de tranziții și animații cursive în aplicațiile web.
Utilitarul `tweened` face parte din modulul `svelte/motion`. Pentru a-l utiliza într-o componentă, importă-l astfel:
import { tweened } from 'svelte/motion'
În esență, utilitarul `tweened` este un „store” Svelte. Un „store” este un obiect JavaScript utilizat pentru gestionarea stării. Store-ul `tweened` are două metode: `set` și `update`. Sintaxa de bază arată astfel:
const y = tweened(valoareInitială, {
duration: [timp-în-milisecunde],
easing: [funcție-de-easing],
})
Codul de mai sus definește o variabilă `y` asociată cu un store `tweened`. Store-ul are doi parametri: primul este valoarea implicită a lui `y`. Al doilea este un obiect cu două proprietăți: `duration` (durata animației în milisecunde) și `easing` (funcția de easing).
Funcțiile de easing în Svelte definesc comportamentul interpolării și fac parte din modulul `svelte/easing`. Trebuie să importi o funcție specifică din acest modul înainte de a o utiliza. Svelte oferă un vizualizator de easing pentru a explora comportamentul diferitelor funcții.
Pentru a demonstra cum se utilizează `tweened`, iată un exemplu în care mărim dimensiunea unui element folosind acest store:
<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>
Codul importă funcțiile `tweened` și `bounceOut` din modulele respective. Variabila `size` este legată de un store `tweened` cu valoarea implicită 0. Această valoare poate fi accesată cu `$` (simbolul dolarului). Al doilea parametru al funcției `tweened` este un obiect cu proprietatea `easing`, care indică funcția `bounceOut`.
În secțiunea de marcare, elementul buton are un eveniment `on:click` care apelează metoda `update` a store-ului `size`, mărind valoarea cu 3 la fiecare click. Elementul div are un stil inline care depinde de valoarea store-ului. Când rulezi codul, vei vedea o animație care mărește înălțimea elementului div.
Tranziții în Svelte
Pentru a afișa sau ascunde elemente din DOM, Svelte folosește directiva `transition` și modulul `svelte/transition`, care exportă funcții utile. De exemplu, pentru a estompa un element, importă funcția `blur` din `svelte/transition`:
<script>
import { blur } from 'svelte/transition';
</script>
Apoi, adaugă funcționalitatea pentru a afișa sau ascunde elementul. În tag-ul script, creează o variabilă `visible` și seteaz-o inițial la `false`:
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Utilizează un bloc `if` pentru a afișa condiționat un `div`. Adaugă directiva `transition` pe div și seteaz-o la `blur`:
{#if visible}
<div transition:blur>Here I am...</div>
{/if}
Adaugă un buton pentru a comuta vizibilitatea div-ului:
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
Când rulezi codul, vei vedea că elementul apare și dispare cu o tranziție de estompare.
Modulul `svelte/transition` exportă șapte funcții: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` și `crossfade`. Tranzițiile din Svelte pot avea parametri. De exemplu, funcția `blur` poate accepta parametrii: `delay`, `duration`, `easing`, `opacity` și `amount` (cantitatea de estompare).
Pe lângă parametrii de tranziție, Svelte oferă tranziții de intrare și ieșire, care îți oferă control mai fin. Ce se întâmplă dacă vrei ca tranziția de intrare să fie blur, iar cea de ieșire să fie slide? Iată cum faci:
<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>
Observă că elementul div nu mai are directiva `transition`, ci `in:blur` și `out:slide`.
Animarea Elementelor în Svelte
Cea mai convenabilă modalitate de a anima elemente în Svelte este utilizarea funcției `flip` din `svelte/animate`. `flip` înseamnă „First, Last, Invert, Play”. Acceptă trei parametri: `delay`, `duration` și `easing`. Iată un exemplu:
<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>
În tag-ul script, prima linie importă funcția `flip`. Avem două array-uri, `originalList` și `shoppingList`. În div-ul `container`, blocul `each` redă fiecare element din `shoppingList`.
Div-ul din interiorul containerului are directiva `animate` setată la `flip`. Apăsarea primului buton sortează lista alfabetic, iar apăsarea celui de-al doilea buton resetează lista. Animația flip se va activa când elementele își schimbă poziția.
Importanța Animației într-o Aplicație Web
Animațiile nu sunt doar un element estetic; ele îmbunătățesc experiența utilizatorului și comunicarea eficientă. Îmbinând aspectul vizual cu funcționalitatea, animațiile fac aplicațiile web mai interactive și intuitive.