Izpratne par pārejām un animācijām Sveltē

Ja animācija tiek veikta labi, tā var uzlabot lietotāja pieredzi un var būt lielisks veids, kā nosūtīt lietotājam atsauksmes. Svelte atvieglo animāciju un pāreju iekļaušanu lietojumprogrammā, un nav nepieciešamas trešās puses JavaScript bibliotēkas.

Svelte projekta izveide

Lai sāktu darboties kopā ar Svelti, par to vajadzētu pārliecināties Node.js izpildlaiks un Mezglu pakotņu pārvaldnieks (NPM) ir pareizi instalēti jūsu datorā. Atveriet savu termināli un palaidiet šādu komandu:

npm create vite

Tas sastatnēs a jauns Vite.js projekts. Nosauciet savu projektu, atlasiet Svelte kā ietvaru un iestatiet variantu uz JavaScript. Pēc tam pārslēdzieties uz projekta direktoriju un palaidiet šo komandu, lai instalētu nepieciešamās atkarības:

npm install

Noņemiet pamatplates kodu, izdzēšot aktīviem un lib mapes un notīrīt tās saturu App.svelte un App.css failus.

Kā lietot Tweening Svelte

Tweening ir paņēmiens animācijā un datorgrafikā, kas ģenerē starpkadrus starp atslēgas kadriem, lai izveidotu vienmērīgu un reālistisku kustību vai pārejas. Svelte piedāvā a

tweened utilīta, kas ļauj animēt elementus, izmantojot skaitliskās vērtības, padarot vienkāršu plūstošu pāreju un animāciju izveidi tīmekļa lietojumprogrammās.

Tweened lietderība ir daļa no slaids/kustība modulis. Lai savā komponentā izmantotu tvīnu, tas ir jāimportē šādi:

import { tweened } from'svelte/motion'

Zem pārsega tweened lietderība ir tikai rakstāms Svelte veikals. Svelte veikals būtībā ir JavaScript objekts, ko varat izmantot stāvokļa pārvaldībai. Tweened veikalam ir divas metodes, proti: komplekts un Atjaunināt. Pamatlīmenī tweened veikala sintakse izskatās apmēram šādi:

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

Iepriekš minētais koda bloks definē mainīgo y un piesaista to tweened veikalam. Veikalā ir divi parametri. Pirmais parametrs apzīmē noklusējuma vērtību y saistīšanai vajadzētu būt. Nākamais parametrs ir objekts ar divām atslēgām ilgums un atvieglošana. The ilgums definē, cik ilgi Tween ir jāilgst milisekundēs atvieglošana definē atvieglošanas funkciju.

Svelte atvieglošanas funkcijas nosaka tvīņa uzvedību. Šīs funkcijas ir daļa no slaids/vieglums modulis, kas nozīmē, ka jums ir jāimportē noteikta funkcija no moduļa, pirms varat to nodot tweened veikalā. Svelte ir atvieglošanas vizualizators, ko varat izmantot, lai izpētītu dažādu atvieglošanas funkciju darbību.

Lai pilnībā ilustrētu, kā var izmantot tweened utilītu, šeit ir piemērs, kā izmantot tweened veikalu, lai palielinātu elementa izmēru programmā Svelte.