Lisää elämää Svelte-sovelluksiisi integroimalla siirtymiä ja kiehtovia animaatioita.
Hyvin tehtynä animaatio voi parantaa käyttökokemusta ja olla hyvä tapa lähettää palautetta käyttäjälle. Svelten avulla animaatioiden ja siirtymien sisällyttäminen sovellukseesi on helppoa ilman, että kolmannen osapuolen JavaScript-kirjastoja tarvitaan.
Svelte-projektin perustaminen
Jotta pääset käyntiin Svelten kanssa, sinun tulee varmistaa se Node.js-ajoaika ja Node Package Manager (NPM) on asennettu oikein tietokoneellesi. Avaa terminaali ja suorita seuraava komento:
npm create vite
Tämä rakennustelineen a uusi Vite.js-projekti. Nimeä projektisi, valitse Hoikka kehykseksi ja aseta variantiksi JavaScript. Vaihda sitten projektihakemistoon ja suorita seuraava komento asentaaksesi tarvittavat riippuvuudet:
npm install
Poista yleiskoodi poistamalla omaisuutta ja lib kansiot ja tyhjentää sen sisällön App.svelte ja App.css tiedostot.
Tweeningin käyttäminen Sveltessä
Tweening on animaatio- ja tietokonegrafiikkatekniikka, joka luo välikehyksiä avainkehysten väliin tasaisen ja realistisen liikkeen tai siirtymien luomiseksi. Svelte tarjoaa a
tweened apuohjelma, jonka avulla voit animoida elementtejä käyttämällä numeerisia arvoja, mikä helpottaa sujuvien siirtymien ja animaatioiden luomista verkkosovelluksiin.Tweened-apuohjelma on osa hoikka/liike moduuli. Jos haluat käyttää tweeniä komponentissasi, sinun on tuotava se seuraavasti:
import { tweened } from'svelte/motion'
Konepellin alla oleva tweened-apuohjelma on vain kirjoitettava Svelte-myymälä. Svelte-kauppa on pohjimmiltaan JavaScript-objekti, jota voit käyttää tilanhallintaan. Tweened-myymälässä on kaksi tapaa, nimittäin: aseta ja päivittää. Perustasolla tweened-myymälän syntaksi näyttää suunnilleen tältä:
const y = tweened(defaultValue, {
duration: [time-in-milliseconds],
easing: [easing-function],
})
Yllä oleva koodilohko määrittää muuttujan y ja sitoo sen tweened-myymälään. Kaupassa on kaksi parametria. Ensimmäinen parametri edustaa oletusarvoa y sitovan pitäisi olla. Seuraava parametri on objekti, jossa on kaksi avainta kesto ja helpotus. The kesto määrittää kuinka kauan Tweenin tulee kestää millisekunteina helpotus määrittää helpotustoiminnon.
Svelten helpotustoiminnot määrittelevät tweenin käyttäytymisen. Nämä toiminnot ovat osa hoikka/helppo moduuli, mikä tarkoittaa, että sinun on tuotava tietty funktio moduulista ennen kuin voit siirtää sen tweened-kauppaan. Sveltessä on helpotusvisualisoija, jonka avulla voit tutkia eri helpotustoimintojen käyttäytymistä.
Havainnollistaaksesi täysin, kuinka voit käyttää tweened-apuohjelmaa, tässä on esimerkki tweened storen käyttämisestä elementin koon kasvattamiseen Sveltessä.
