Razumijevanje prijelaza i animacija u Svelteu

Kada se dobro izvede, animacija može poboljšati korisničko iskustvo i može biti izvrstan način slanja povratnih informacija korisniku. Svelte vam olakšava ugradnju animacija i prijelaza u vašu aplikaciju s vrlo malo potrebe za JavaScript bibliotekama trećih strana.

Postavljanje Svelte projekta

Kako biste počeli raditi sa Svelteom, trebali biste to osigurati vrijeme izvođenja Node.js i Node Package Manager (NPM) ispravno instalirani na vašem računalu. Otvorite svoj terminal i pokrenite sljedeću naredbu:

npm create vite

Ovo će postaviti skelu a novi Vite.js projekt. Imenujte svoj projekt, odaberite Graciozan kao okvir i postavite varijantu na JavaScript. Zatim se prebacite u direktorij projekta i pokrenite sljedeću naredbu za instaliranje potrebnih ovisnosti:

npm install

Uklonite šablonski kod brisanjem imovina i lib mape i brisanje sadržaja mape App.svelte i App.css datoteke.

Kako koristiti Tweening u Svelteu

Tweening je tehnika u animaciji i računalnoj grafici koja generira međukadrove između ključnih kadrova za stvaranje glatkih i realističnih pokreta ili prijelaza. Svelte nudi a tweened uslužni program koji vam omogućuje animiranje elemenata pomoću numeričkih vrijednosti, što olakšava stvaranje fluidnih prijelaza i animacija u vašim web aplikacijama.

Uslužni program tweened dio je vitak/kretanje modul. Da biste koristili tweened u svojoj komponenti, morate ga uvesti ovako:

import { tweened } from'svelte/motion'

Ispod haube, tweened uslužni program samo je Svelte trgovina za pisanje. Svelte trgovina je u osnovi JavaScript objekt koji možete koristiti za upravljanje stanjem. Tweened store ima dvije metode, naime: postaviti i Ažuriraj. Na osnovnoj razini, sintaksa za tweened trgovinu izgleda otprilike ovako:

const y = tweened(defaultValue, {
 duration: [time-in-milliseconds],
 easing: [easing-function],
})

Gornji blok koda definira varijablu g i veže ga za tweened store. U trgovini postoje dva parametra. Prvi parametar predstavlja zadanu vrijednost g uvez treba imati. Sljedeći parametar je objekt s dva ključa trajanje i popuštanje. The trajanje definira koliko dugo bi tween trebao trajati u milisekundama dok popuštanje definira funkciju popuštanja.

Funkcije ublažavanja u Svelteu definiraju ponašanje tweena. Ove su funkcije dio vitak/olakšanje modul što znači da morate uvesti određenu funkciju iz modula prije nego što je možete proslijediti u tween store. Svelte ima vizualizator popuštanja koji možete koristiti za istraživanje ponašanja različitih funkcija popuštanja.

Za potpunu ilustraciju kako možete koristiti uslužni program tweened, ovdje je primjer korištenja tweened storea za povećanje veličine elementa u Svelteu.