Dați viață aplicațiilor dvs. Svelte integrând tranziții și animații captivante.

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.

Stabilirea unui proiect Svelte

Pentru a începe să alergi cu Svelte, ar trebui să te asiguri că timpul de rulare Node.js și Node Package Manager (NPM) sunt instalate corect pe computerul dvs. Deschideți terminalul și rulați următoarea comandă:

npm create vite

Aceasta va schela a noul 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

Îndepărtați codul standard ștergând codul active și lib foldere și ștergerea conținutului fișierului App.svelte și App.css fișiere.

Cum să utilizați Tweening în Svelte

instagram viewer

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ă a interpolat utilitar 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 din svelt/mișcare modul. 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: a stabilit ș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 îl leagă de un magazin interpolat. În magazin, există doi parametri. Primul parametru reprezintă valoarea implicită a y legarea ar trebui să aibă. Următorul parametru este un obiect cu două chei durată și relaxarea. The durată 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 svelte/uşurare modul, 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.