Når det gjøres godt, kan animasjon forbedre brukeropplevelsen og kan være en fin måte å sende tilbakemeldinger til brukeren på. Svelte gjør det enkelt for deg å inkorporere animasjoner og overganger i applikasjonen din med svært lite behov for tredjeparts JavaScript-biblioteker.
Innholdsfortegnelse
Sette opp et Svelte-prosjekt
For å komme i gang med Svelte, bør du sørge for at Node.js runtime og Node Package Manager (NPM) er riktig installert på datamaskinen din. Åpne terminalen og kjør følgende kommando:
npm create vite
Dette vil stillas et nytt Vite.js-prosjekt. Gi prosjektet et navn, velg Svelte som rammeverk, og sett varianten til JavaScript. Bytt deretter til prosjektkatalogen og kjør følgende kommando for å installere de nødvendige avhengighetene:
npm install
Fjern boilerplate-koden ved å slette aktiva og lib-mappene, og tømme innholdet i App.svelte- og App.css-filene.
Hvordan bruke Tweening i Svelte
Tweening er en teknikk innen animasjon og datagrafikk som genererer mellombilder mellom nøkkelbilder for å skape jevne og realistiske bevegelser eller overganger. Svelte tilbyr et tweened-verktøy som lar deg animere elementer ved hjelp av numeriske verdier, noe som gjør det enkelt å lage flytende overganger og animasjoner i nettapplikasjonene dine.
Det tweenede verktøyet er en del av svelte/motion-modulen. For å bruke tweened i komponenten din, må du importere den slik:
import { tweened } from 'svelte/motion'
Under panseret er det tweenede verktøyet bare en skrivbar Svelte-butikk. En Svelte-butikk er i utgangspunktet et JavaScript-objekt som du kan bruke til å håndtere tilstandsadministrasjon. Den interpolerte butikken har to metoder, nemlig: angi og oppdater. På det grunnleggende nivået ser syntaksen for en tweened butikk omtrent slik ut:
const y = tweened(defaultValue, {
duration: [time-in-milliseconds],
easing: [easing-function],
})
Kodeblokken ovenfor definerer en variabel y og binder den til et interpolert lager. I butikken er det to parametere. Den første parameteren representerer standardverdien y-bindingen skal ha. Den neste parameteren er et objekt med to nøkler varighet og lettelser. Varigheten definerer hvor lenge interpoleringen skal vare i millisekunder, mens easing definerer easing-funksjonen.
Easing-funksjoner i Svelte definerer oppførselen til en tween. Disse funksjonene er en del av svelte/easing-modulen som betyr at du må importere en spesifikk funksjon fra modulen før du kan sende den inn i den tweenede butikken. Svelte har en easing visualizer som du kan bruke til å utforske oppførselen til forskjellige easing funksjoner.
For å fullt ut illustrere hvordan du kan bruke verktøyet tweened, her er et eksempel på bruk av tweened-lageret for å øke størrelsen på et element i Svelte.
<script>
import { tweened } from "svelte/motion";
import { bounceOut } from "svelte/easing";const size = tweened(0, {
easing:bounceOut
})
</script><div class="container">
<div style={`height: ${$size * 30}px;`}>
</div>
</div>
<button on:click={()=>(size.update(()=>$size+3))}>Increase size</button><style>
.container{
display: flex;
align-items: flex-end;
margin-top: 400px;
}
div{
height:0;
width:100px;
background-color: red;
}
</style>
Kodeblokken ovenfor importerer to funksjoner: tweened og bounceOut fra henholdsvis svelte/motion og svelte/easing-modulene. Deretter er det en konstant variabel som er bundet til den interpolerte butikken. Denne butikken har en standardverdi på 0. Denne standardverdien (butikkverdien) kan nås med $-symbolet. Den neste parameteren i den interpolerte funksjonen er et objekt med en easing-tast som peker til bounceOut easing-funksjonen.
I markup-delen har knappeelementet et on:click-direktiv som kaller opp oppdateringsmetoden på størrelsesbindingen. Denne metoden øker $size-butikkverdien med 3 hver gang du klikker på knappen. div-elementet har en innebygd stil som er avhengig av $size-butikkverdien. Når du kjører denne koden i nettleseren, bør du se dette:
Overganger i Svelte
For å overføre elementer inn og ut av Document Object Model (DOM), har Svelte et overgangsdirektiv og en modul kalt svelte/transition som eksporterer nyttige funksjoner som du kan bruke med overgangsdirektivet. For å for eksempel gjøre et element uskarpt inn og ut av en DOM, importerer du først blur-funksjonen fra svelte/transition:
<script>
import { blur } from 'svelte/transition';
</script>
Legg deretter til funksjonaliteten for å montere og avmontere et element fra DOM. Opprett en synlig variabel i skripttaggen og sett den til usann.
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Bruk deretter hvis-blokken til å betinget gjengi en div. Sørg for at du legger til et overgangsdirektiv på div-en og setter den til uskarp
{#if visible}
<div>Here I am...</div>
{/if}
Legg deretter til en knapp for å vise eller skjule div.
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
Når du kjører koden i nettleseren, bør du se dette:
Svelte/transition-modulen eksporterer syv funksjoner, nemlig: fade, blur, fly, slide, scale, draw og crossfade. Overganger i Svelte kan akseptere parametere. For eksempel kan uskarphet-funksjonen fra eksempelet tidligere godta følgende parametere: forsinkelse, varighet, lettelse (forenklingsfunksjonen), opasitet og mengde (størrelsen på uskarphet).
I tillegg til parametere på overganger, tilbyr Svelte også inn og ut overganger som gir deg finere kontroll over et elements overgang. Tenk på det siste eksemplet, hva om du ville at elementets inngangsovergang skulle være uskarp, og utgangsovergangen skulle være glidende? Slik gjør du det:
<script>
import { blur, slide } from 'svelte/transition';
let visible = false;
</script>{#if visible}
<div in:blur out:slide>Here I am...</div>
{/if}<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
I kodeblokken ovenfor, legg merke til hvordan det ikke er noen overgangsdirektiv på div-elementet. I stedet er overgangsdirektivet erstattet med inn- og ut-direktiver som peker på henholdsvis uskarphet og glidning.
Animering av Svelte Elements
Den mest praktiske måten å animere elementer i Svelte er ved å bruke flip-funksjonen fra svelte/animate. flip står for «First, Last, Invert, Play». Den aksepterer tre parametere, nemlig: forsinkelse, varighet og lettelse. Ta en titt på følgende kode:
<script>
import { flip } from "svelte/animate";
let originalList = ["Tomatoes", "Bread", "Fish", "Milk", "Cat food"];
let shoppingList = [...originalList];
</script><div class="container">
{#each shoppingList as item (item)}
{@const number = shoppingList.indexOf(item)}
<div animate:flip>
{number + 1}. {item}
</div>
{/each}
</div><button on:click={() => shoppingList = shoppingList.sort()}>Arrange</button>
<button on:click={() => shoppingList = [...originalList]}>Reset</button>
Kodeblokken illustrerer hvordan du kan bruke animasjonsdirektivet i Svelte. I skriptkoden importerer den første linjen flip-funksjonen. Det er to arrays, originalList og shoppingList. I «container» div, er nøkkelblokken ansvarlig for å gjengi hvert element i shoppingList-arrayen.
Barne-div-en til «container»-div har et animert direktiv som peker på flip-funksjonen. Trykk på den første knappen vil sortere listen alfabetisk, mens et trykk på den andre knappen vil nullstille listen. Når du kjører koden i nettleseren, bør du se dette:
Hvorfor er animasjon viktig i alle nettapplikasjoner?
Betydningen av animasjoner går utover bare visuell appell; de innkapsler essensen av forbedret brukeropplevelse og effektiv kommunikasjon. Ved å sømløst blande estetikk med funksjonalitet, puster animasjon liv i nettapplikasjoner, noe som gjør dem ikke bare engasjerende, men også intuitive.