Animasjoner, når de er implementert på en god måte, kan løfte brukeropplevelsen betydelig og fungere som et utmerket middel for å gi tilbakemelding til brukeren. Svelte forenkler prosessen med å integrere animasjoner og overganger i applikasjonen din, og reduserer behovet for eksterne JavaScript-biblioteker til et minimum.
Konfigurering av et Svelte-prosjekt
For å starte med Svelte, må du først bekrefte at Node.js runtime og Node Package Manager (NPM) er korrekt installert på datamaskinen din. Åpne terminalen og utfør følgende kommando:
npm create vite
Dette vil initialisere et nytt Vite.js-prosjekt. Gi prosjektet et navn, velg Svelte som rammeverk, og spesifiser JavaScript som variant. Naviger deretter til prosjektets mappe og bruk denne kommandoen for å installere de nødvendige avhengighetene:
npm install
Fjern den medfølgende startkoden ved å slette `assets` og `lib` mappene, og tøm innholdet i `App.svelte` og `App.css` filene.
Hvordan anvende Tweening i Svelte
Tweening er en teknikk brukt innen animasjon og datagrafikk for å generere mellomliggende rammer mellom nøkkelrammer. Dette gir glatte og naturtro bevegelser eller overganger. Svelte tilbyr et `tweened`-verktøy som lar deg animere elementer basert på numeriske verdier, noe som gjør det enkelt å lage flytende overganger og animasjoner i webapplikasjonene dine.
`tweened`-verktøyet er en integrert del av `svelte/motion`-modulen. For å bruke `tweened` i komponenten din, importerer du det som følger:
import { tweened } from 'svelte/motion'
Under overflaten er `tweened`-verktøyet egentlig en skrivbar Svelte-lagring. En Svelte-lagring er i bunn og grunn et JavaScript-objekt som du kan benytte for å administrere tilstand. Den interpolerte lagringen har to metoder: `set` og `update`. Den grunnleggende syntaksen for en `tweened`-lagring ser omtrent slik ut:
const y = tweened(defaultValue, {
duration: [tid-i-millisekunder],
easing: [easing-funksjon],
})
Kodeblokken ovenfor definerer en variabel `y` og kobler den til en interpolert lagring. Lagringen tar to parametere. Den første er standardverdien `y`-bindingen skal ha. Den andre parameteren er et objekt med to nøkler: `duration` og `easing`. `duration` angir hvor lenge interpoleringen skal vare i millisekunder, mens `easing` spesifiserer easing-funksjonen.
Easing-funksjoner i Svelte definerer hvordan en tween skal oppføre seg. Disse funksjonene er en del av `svelte/easing`-modulen, noe som betyr at du må importere en bestemt funksjon fra modulen før du kan bruke den i `tweened`-lagringen. Svelte tilbyr et visualiseringsverktøy for easing som du kan bruke til å utforske oppførselen til forskjellige easing-funksjoner.
For å illustrere bruken av `tweened`-verktøyet, her er et eksempel som bruker `tweened`-lagringen 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))}>Øk størrelse</button><style>
.container{
display: flex;
align-items: flex-end;
margin-top: 400px;
}
div{
height:0;
width:100px;
background-color: red;
}
</style>
Denne kodeblokken importerer to funksjoner: `tweened` og `bounceOut` fra henholdsvis `svelte/motion` og `svelte/easing`-modulene. Deretter defineres en konstant variabel som er bundet til den interpolerte lagringen. Denne lagringen har en standardverdi på 0. Denne standardverdien (lagringsverdien) kan nås med $-symbolet. Den neste parameteren i den interpolerte funksjonen er et objekt med en `easing`-nøkkel som peker til `bounceOut` easing-funksjonen.
I markup-delen har knappe-elementet et `on:click`-direktiv som kaller `update`-metoden på størrelsesbindingen. Denne metoden øker `$size`-lagringsverdien med 3 hver gang du trykker på knappen. `div`-elementet har en innebygd stil som er avhengig av `$size`-lagringsverdien. Når du kjører denne koden i nettleseren, vil du se følgende:
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 praktiske funksjoner som kan brukes med overgangsdirektivet. For eksempel, for å fade et element 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 funksjonalitet for å montere og demontere et element fra DOM. Opprett en `visible`-variabel i skript-taggen og sett den til `false`.
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Bruk så en if-blokk for å betinget gjengi en `div`. Pass på at du legger til et overgangsdirektiv på `div` og setter den til `blur`.
{#if visible}
<div>Her er jeg...</div>
{/if}
Legg deretter til en knapp for å vise eller skjule `div`.
<button on:click={()=>visible=!visible}>
{visible ? "Skjul" : "Vis"}
</button>
Når du kjører koden i nettleseren, vil du se følgende:
`svelte/transition`-modulen eksporterer syv funksjoner: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` og `crossfade`. Overganger i Svelte kan akseptere parametere. For eksempel kan `blur`-funksjonen fra eksemplet over godta følgende parametere: `delay`, `duration`, `easing` (easing-funksjonen), `opacity` og `amount` (størrelsen på uskarpheten).
I tillegg til parametere på overganger, tilbyr Svelte også inn- og ut-overganger som gir deg mer kontroll over et elements overgang. La oss se på det siste eksemplet, hva om du ville at elementets inngangsovergang skulle være uskarp, og utgangsovergangen skulle være en slide? Slik gjør du det:
<script>
import { blur, slide } from 'svelte/transition';
let visible = false;
</script>{#if visible}
<div in:blur out:slide>Her er jeg...</div>
{/if}<button on:click={()=>visible=!visible}>
{visible ? "Skjul" : "Vis"}
</button>
I kodeblokken over, merk deg hvordan det ikke er noe overgangsdirektiv på `div`-elementet. I stedet er overgangsdirektivet erstattet med `in`- og `out`-direktiver som peker på henholdsvis `blur` og `slide`.
Animasjon av Svelte-elementer
Den enkleste måten å animere elementer i Svelte på er ved å bruke `flip`-funksjonen fra `svelte/animate`. `flip` står for «First, Last, Invert, Play». Den aksepterer tre parametere: `delay`, `duration` og `easing`. Ta en titt på følgende kode:
<script>
import { flip } from "svelte/animate";
let originalList = ["Tomater", "Brød", "Fisk", "Melk", "Kattemat"];
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()}>Sorter</button>
<button on:click={() => shoppingList = [...originalList]}>Tilbakestill</button>
Denne kodeblokken illustrerer hvordan man kan bruke animasjonsdirektivet i Svelte. I skriptkoden importerer den første linjen `flip`-funksjonen. Det er to arrays, `originalList` og `shoppingList`. I «container»-`div`-en er `each`-blokken ansvarlig for å gjengi hvert element i `shoppingList`-arrayen.
Barne-`div`-en til «container»-`div`-en har et animasjonsdirektiv 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 følgende:
Hvorfor er animasjon viktig i enhver webapplikasjon?
Viktigheten av animasjoner strekker seg utover bare estetisk appell; de innkapsler essensen av forbedret brukeropplevelse og effektiv kommunikasjon. Ved å sømløst kombinere estetikk med funksjonalitet, gir animasjoner liv til webapplikasjoner, noe som gjør dem ikke bare engasjerende, men også intuitive.