Svelte üleminekute ja animatsioonide mõistmine

Kui see on hästi tehtud, võib animatsioon parandada kasutajakogemust ja olla suurepärane viis kasutajale tagasiside saatmiseks. Svelte teeb animatsioonide ja üleminekute lisamise oma rakendusse lihtsaks, ilma et oleks vaja kolmanda osapoole JavaScripti teeke.

Svelte projekti seadistamine

Selleks, et Sveltega tööle hakata, peaksite selles veenduma Node.js käitusaeg ja Sõlme paketihaldur (NPM) on teie arvutisse õigesti installitud. Avage oma terminal ja käivitage järgmine käsk:

npm create vite

See karkass a uus Vite.js projekt. Nimetage oma projekt, valige Svelte raamistikuks ja määrake variandiks JavaScript. Seejärel lülitage projekti kataloogi ja käivitage vajalike sõltuvuste installimiseks järgmine käsk:

npm install

Eemaldage standardkood, kustutades varasid ja lib kaustad ja nende sisu tühjendamine App.svelte ja App.css failid.

Kuidas kasutada Tweeningit Svelte'is

Tweening on animatsiooni ja arvutigraafika tehnika, mis genereerib võtmekaadrite vahel vahekaadreid, et luua sujuvat ja realistlikku liikumist või üleminekuid. Svelte pakub a

tweened utiliit, mis võimaldab animeerida elemente arvväärtusi kasutades, muutes veebirakendustes sujuvate üleminekute ja animatsioonide loomise lihtsaks.

Tweened utiliit on osa sihvakas/liikumine moodul. Tweenedi kasutamiseks oma komponendis peate selle importima järgmiselt:

import { tweened } from'svelte/motion'

Kapoti all on tweened utiliit lihtsalt kirjutatav Svelte pood. Svelte pood on põhimõtteliselt JavaScripti objekt, mida saate olekuhalduse haldamiseks kasutada. Tweenedi poel on kaks meetodit, nimelt: seatud ja värskendada. Põhitasemel näeb tweened-poe süntaks välja umbes selline:

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

Ülaltoodud koodiplokk määratleb muutuja y ja seob selle tweened poodi. Poes on kaks parameetrit. Esimene parameeter tähistab vaikeväärtust y siduv peaks olema. Järgmine parameeter on kahe võtmega objekt kestus ja leevendamine. The kestus määrab, kui kaua Tween peaks millisekundites kestma leevendamine määratleb kergendusfunktsiooni.

Svelte'i kergendamisfunktsioonid määravad tweeni käitumise. Need funktsioonid on osa sihvakas/kergenev moodul, mis tähendab, et peate moodulist importima konkreetse funktsiooni, enne kui saate selle tweened-poodi edastada. Sveltel on kergendamise visualiseerija, mille abil saate uurida erinevate kergendamisfunktsioonide käitumist.

Tweened-utiliidi kasutamise täielikuks illustreerimiseks on siin näide tweened-poe kasutamisest elemendi suuruse suurendamiseks Svelte'is.