Când este făcută bine, animația poate îmbunătăți experiența utilizatorului și poate fi o modalitate excelentă de a trimite feedback utilizatorului. Svelte vă ajută să încorporați animații și tranziții în aplicația dvs., cu foarte puțină nevoie de biblioteci JavaScript terțe.
Cuprins
Stabilirea unui proiect Svelte
Pentru a începe să rulați cu Svelte, ar trebui să vă asigurați că runtime-ul Node.js și Node Package Manager (NPM) sunt instalate corect pe computer. Deschideți terminalul și rulați următoarea comandă:
npm create vite
Acest lucru va schelă un nou proiect Vite.js. Denumiți-vă proiectul, selectați Svelte ca cadru și setați varianta la JavaScript. Apoi treceți la directorul proiectului și rulați următoarea comandă pentru a instala dependențele necesare:
npm install
Eliminați codul standard ștergând activele și folderele lib și ștergând conținutul fișierelor App.svelte și App.css.
Cum să utilizați Tweening în Svelte
Tweening-ul este o tehnică în animație și grafică pe computer care generează cadre intermediare între cadrele cheie pentru a crea mișcare sau tranziții netede și realiste. Svelte oferă un utilitar de interpolare care vă permite să animați elemente folosind valori numerice, simplificând crearea de tranziții și animații fluide în aplicațiile dvs. web.
Utilitarul tweened este o parte a modulului svelte/motion. Pentru a utiliza interpolarea în componenta dvs., trebuie să o importați astfel:
import { tweened } from 'svelte/motion'
Sub capotă, utilitarul tweened este doar un magazin Svelte care poate fi scris. Un magazin Svelte este practic un obiect JavaScript pe care îl puteți folosi pentru a gestiona gestionarea stării. Magazinul tweened are două metode și anume: setați și actualizați. La nivel de bază, sintaxa pentru un magazin tweened arată cam așa:
const y = tweened(defaultValue, {
duration: [time-in-milliseconds],
easing: [easing-function],
})
Blocul de cod de mai sus definește o variabilă y și o leagă la un magazin interpolat. În magazin, există doi parametri. Primul parametru reprezintă valoarea implicită pe care ar trebui să o aibă legarea y. Următorul parametru este un obiect cu două chei durată și ușurință. Durata definește cât de mult ar trebui să dureze interpolarea în milisecunde, în timp ce relaxarea definește funcția de relaxare.
Funcțiile de relaxare din Svelte definesc comportamentul unui interpolar. Aceste funcții fac parte din modulul svelte/easing, ceea ce înseamnă că trebuie să importați o anumită funcție din modul înainte de a o putea trece în magazinul interpolat. Svelte are un vizualizator de relaxare pe care îl puteți utiliza pentru a explora comportamentul diferitelor funcții de relaxare.
Pentru a ilustra pe deplin modul în care puteți utiliza utilitarul tweened, iată un exemplu de utilizare a magazinului tweened pentru a crește dimensiunea unui element în Svelte.
<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>
Blocul de cod de mai sus importă două funcții: tweened și bounceOut din modulele svelte/motion și, respectiv, svelte/easing. În continuare, există o variabilă constantă care este legată de magazinul interpolat. Acest magazin are o valoare implicită de 0. Această valoare implicită (valoarea magazinului) poate fi accesată cu simbolul $. Următorul parametru din funcția tweened este un obiect cu o cheie de relaxare care indică funcția de relaxare bounceOut.
În secțiunea de marcare, elementul buton are o directivă on:click care apelează metoda de actualizare privind legarea dimensiunii. Această metodă mărește valoarea magazinului $size cu 3 de fiecare dată când faceți clic pe butonul. Elementul div are un stil inline care depinde de valoarea magazinului $size. Când rulați acest cod în browser, iată ce ar trebui să vedeți:
Tranziții în Svelte
Pentru a trece elementele în și din Document Object Model (DOM), Svelte are o directivă de tranziție și un modul numit svelte/transition care exportă funcții utile pe care le puteți utiliza cu directiva de tranziție. De exemplu, pentru a estompa un element în și în afara unui DOM, importați mai întâi funcția de estompare din svelte/tranziție:
<script>
import { blur } from 'svelte/transition';
</script>
Apoi adăugați funcționalitatea pentru a monta și demonta un element din DOM. În eticheta de script, creați o variabilă vizibilă și setați-o la false.
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Apoi utilizați blocul if pentru a reda condiționat un div. Asigurați-vă că adăugați o directivă de tranziție pe div și setați-o la estompare
{#if visible}
<div>Here I am...</div>
{/if}
Apoi adăugați un buton pentru a afișa sau ascunde div-ul.
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
Când rulați codul în browser, iată ce ar trebui să vedeți:
Modulul svelte/tranziție exportă șapte funcții și anume: fade, blur, fly, slide, scale, draw and crossfade. Tranzițiile în Svelte pot accepta parametri. De exemplu, funcția de estompare din exemplul anterior poate accepta următorii parametri: întârziere, durată, relaxare (funcția de relaxare), opacitate și cantitate (dimensiunea estomparii).
Pe lângă parametrii de tranziție, Svelte oferă și tranziții de intrare și ieșire care vă oferă un control mai fin asupra tranziției unui element. Luați în considerare ultimul exemplu, Ce se întâmplă dacă ați dori ca tranziția de intrare a elementului să fie neclară, iar tranziția sa de ieșire să fie slide? Iată cum o 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>
În blocul de cod de mai sus, observați cum nu există nicio directivă de tranziție pe elementul div. În schimb, directiva de tranziție a fost înlocuită cu directive de intrare și de ieșire care indică estomparea și, respectiv, alunecarea.
Animarea elementelor Svelte
Cea mai convenabilă modalitate de a anima elemente în Svelte este folosirea funcției flip din svelte/animate. flip înseamnă „First, Last, Invert, Play”. Acceptă trei parametri și anume: întârziere, durată și relaxare. Aruncă o privire la următorul cod:
<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>
Blocul de cod ilustrează modul în care puteți utiliza directiva animate în Svelte. În eticheta de script, prima linie importă funcția flip. Există două matrice, originalList și shoppingList. În div-ul „container”, blocul cu cheie este responsabil pentru redarea fiecărui element din matricea shoppingList.
Div-ul copil al div-ului „container” are o directivă animată care indică funcția flip. Apăsarea primului buton va sorta lista în ordine alfabetică, în timp ce apăsarea celui de-al doilea buton va reseta lista. Când rulați codul în browser, iată ce ar trebui să vedeți:
De ce este importantă animația în orice aplicație web?
Semnificația animațiilor depășește simpla atracție vizuală; ele încapsulează esența îmbunătățirii experienței utilizatorului și a comunicării eficiente. Îmbinând perfect estetica cu funcționalitatea, animația dă viață aplicațiilor web, făcându-le nu numai captivante, ci și intuitive.