Razumevanje prehodov in animacij v Svelte

Če je animacija dobro narejena, lahko izboljša uporabniško izkušnjo in je lahko odličen način za pošiljanje povratnih informacij uporabniku. Svelte vam olajša vključitev animacij in prehodov v vašo aplikacijo z zelo malo potrebe po knjižnicah JavaScript tretjih oseb.

Postavitev projekta Svelte

Če želite začeti uporabljati Svelte, se morate prepričati, da izvajalno okolje Node.js in Node Package Manager (NPM) so pravilno nameščeni na vašem računalniku. Odprite terminal in zaženite naslednji ukaz:

npm create vite

To bo oder a nov projekt Vite.js. Poimenujte svoj projekt, izberite Svelte kot ogrodje in nastavite različico na JavaScript. Nato preklopite v imenik projekta in zaženite naslednji ukaz za namestitev potrebnih odvisnosti:

npm install

Odstranite okvirno kodo tako, da izbrišete sredstev in lib mape in brisanje vsebine map App.svelte in App.css datoteke.

Kako uporabljati Tweening v Svelte

Tweening je tehnika v animaciji in računalniški grafiki, ki ustvari vmesne sličice med ključnimi sličicami, da ustvari gladko in realistično gibanje ali prehode. Svelte ponuja a

tweened pripomoček, ki vam omogoča animiranje elementov z uporabo številskih vrednosti, kar olajša ustvarjanje tekočih prehodov in animacij v vaših spletnih aplikacijah.

Pripomoček tweened je del vitko/gibanje modul. Če želite uporabiti tweened v vaši komponenti, jo morate uvoziti takole:

import { tweened } from'svelte/motion'

Pod pokrovom je pripomoček tweened le zapisljiva trgovina Svelte. Trgovina Svelte je v bistvu objekt JavaScript, ki ga lahko uporabite za upravljanje stanja. Trgovina tweened ima dva načina, in sicer: set in nadgradnja. Na osnovni ravni je sintaksa za tweened trgovino videti nekako takole:

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

Zgornji blok kode definira spremenljivko l in ga poveže s trgovino tweened. V trgovini sta dva parametra. Prvi parameter predstavlja privzeto vrednost l vezava bi morala imeti. Naslednji parameter je objekt z dvema ključema trajanje in lajšanje. The trajanje določa, kako dolgo naj traja tween v milisekundah, medtem ko lajšanje definira funkcijo popuščanja.

Funkcije sproščanja v Svelte definirajo vedenje tweena. Te funkcije so del vitek/popuščanje modul, kar pomeni, da morate uvoziti določeno funkcijo iz modula, preden jo lahko posredujete v trgovino tween. Svelte ima vizualizator popuščanja, ki ga lahko uporabite za raziskovanje obnašanja različnih funkcij popuščanja.

Za popolno ilustracijo, kako lahko uporabite pripomoček tweened, je tukaj primer uporabe trgovine tweened za povečanje velikosti elementa v Svelte.