Perėjimų ir animacijų supratimas Svelte

Gerai atlikta animacija gali pagerinti vartotojo patirtį ir gali būti puikus būdas vartotojui siųsti atsiliepimus. „Svelte“ leidžia lengvai įtraukti animacijas ir perėjimus į programą, nes nereikia trečiųjų šalių „JavaScript“ bibliotekų.

Svelte projekto kūrimas

Norėdami pradėti dirbti su Svelte, turėtumėte tuo įsitikinti Node.js vykdymo laikas ir Mazgo paketų tvarkyklė (NPM) yra tinkamai įdiegti jūsų kompiuteryje. Atidarykite terminalą ir paleiskite šią komandą:

npm create vite

Tai bus pastoliai a naujas Vite.js projektas. Pavadinkite savo projektą, pasirinkite Svelte kaip karkasą ir nustatykite variantą į JavaScript. Tada perjunkite į projekto katalogą ir paleiskite šią komandą, kad įdiegtumėte reikiamas priklausomybes:

npm install

Pašalinkite pagrindinį kodą ištrynę turto ir lib aplankus ir išvalykite jų turinį App.svelte ir App.css failus.

Kaip naudoti „Tweening“ Svelte

Tweening yra animacijos ir kompiuterinės grafikos technika, kuri generuoja tarpinius kadrus tarp pagrindinių kadrų, kad būtų sukurtas sklandus ir tikroviškas judesys arba perėjimai. Svelte siūlo a

tweened įrankis, leidžiantis animuoti elementus naudojant skaitines reikšmes, todėl žiniatinklio programose paprasta kurti sklandžius perėjimus ir animacijas.

Tweened naudingumas yra dalis lieknas/judėjimas modulis. Norėdami naudoti tweeną savo komponente, turite jį importuoti taip:

import { tweened } from'svelte/motion'

Po gaubtu „tweened“ komunalinė įranga yra tik rašoma „Svelte“ parduotuvė. „Svelte“ parduotuvė iš esmės yra „JavaScript“ objektas, kurį galite naudoti būsenos valdymui. Tweened parduotuvėje yra du būdai: rinkinys ir atnaujinti. Pagrindiniame lygyje „Tweened“ parduotuvės sintaksė atrodo maždaug taip:

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

Aukščiau pateiktas kodo blokas apibrėžia kintamąjį y ir pririša prie tweened parduotuvės. Parduotuvėje yra du parametrai. Pirmasis parametras reiškia numatytąją reikšmę y privalomas turėtų turėti. Kitas parametras yra objektas su dviem raktais trukmės ir palengvėjimas. The trukmės apibrėžia, kiek laiko tarpas turi trukti milisekundėmis palengvėjimas apibrėžia lengvinimo funkciją.

„Svelte“ palengvinimo funkcijos apibrėžia „tween“ elgesį. Šios funkcijos yra dalis lieknas/lengvas modulis, o tai reiškia, kad turite importuoti konkrečią funkciją iš modulio, kad galėtumėte perduoti ją į tweened parduotuvę. „Svelte“ turi lengvinimo vizualizatorių, kurį galite naudoti norėdami ištirti įvairių lengvinimo funkcijų veikimą.

Norėdami visiškai iliustruoti, kaip galite naudoti „tweened“ įrankį, čia pateikiamas „tweened“ parduotuvės naudojimo pavyzdys, norint padidinti „Svelte“ elemento dydį.