Animationer, när de är väl utförda, höjer användarupplevelsen och fungerar som ett utmärkt sätt att ge återkoppling till användaren. Svelte gör det enkelt att integrera animationer och övergångar i din applikation, med minimalt behov av externa JavaScript-bibliotek.
Skapa ett Svelte-projekt
För att börja med Svelte behöver du ha Node.js runtime och Node Package Manager (NPM) installerade på din dator. Öppna terminalen och kör kommandot:
npm create vite
Detta kommando initierar ett nytt Vite.js-projekt. Ange ett namn för projektet, välj Svelte som ramverk, och JavaScript som variant. Navigera till projektkatalogen och kör sedan kommandot nedan för att installera nödvändiga beroenden:
npm install
Rensa startkoden genom att ta bort mapparna ”assets” och ”lib”, samt innehållet i filerna ”App.svelte” och ”App.css”.
Använda Tweening i Svelte
Tweening är en animationsteknik som skapar mellanliggande bilder (frames) mellan nyckelbilder för att åstadkomma mjuka rörelser och övergångar. Svelte erbjuder ett verktyg, ”tweened”, som möjliggör animering av element baserat på numeriska värden. Detta förenklar skapandet av animerade övergångar i webbapplikationer.
Verktyget ”tweened” ingår i modulen ”svelte/motion”. För att använda det, importera det i din komponent:
import { tweened } from 'svelte/motion'
Internt fungerar ”tweened” som en skrivbar Svelte-store, en mekanism för tillståndshantering. En ”tweened” store har metoderna ”set” och ”update”. Grundläggande syntax för en ”tweened” store ser ut så här:
const y = tweened(startvärde, {
duration: [tid-i-millisekunder],
easing: [easing-funktion],
})
Kodblocket ovan skapar variabeln ’y’ kopplad till en ”tweened” store. Den tar två parametrar: startvärde för ’y’ och ett objekt med ”duration” (varaktighet i millisekunder) och ”easing” (easing-funktion). ”Duration” anger hur lång tid animationen ska ta, medan ”easing” definierar animationens rörelsemönster.
Easing-funktioner definierar beteendet hos en animation. Dessa funktioner ingår i modulen ”svelte/easing”, vilket kräver att du importerar en specifik funktion för att använda den. Svelte erbjuder en easing-visualiserare som hjälper dig utforska olika easing-funktioner.
Här följer ett exempel på hur du kan använda verktyget ”tweened” för att animera ett elements storlek:
<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))}>Öka storlek</button><style>
.container{
display: flex;
align-items: flex-end;
margin-top: 400px;
}
div{
height:0;
width:100px;
background-color: red;
}
</style>
Koden ovan importerar funktionerna ”tweened” och ”bounceOut” från ”svelte/motion” och ”svelte/easing”, respektive. En variabel ”size” skapas och kopplas till en ”tweened” store med startvärdet 0. Butikens värde kan nås med symbolen ’$’. ’easing’-parametern anger bounceOut-funktionen.
I markup-delen har knappen ett ”on:click”-direktiv som anropar metoden ”update” på ”size”-variabeln. Metoden ökar butikens värde med 3 varje gång knappen klickas. Div-elementets inline-style påverkas av storleksbutikens värde. När du kör koden i en webbläsare ser du elementets storlek öka mjukt varje gång du klickar på knappen.
Övergångar i Svelte
För att animera element som läggs till eller tas bort från DOM, använder Svelte övergångsdirektivet tillsammans med modulen ”svelte/transition” som exporterar användbara funktioner. Till exempel, för att animera ett elements in- och utfading, importera ”blur” funktionen:
<script>
import { blur } from 'svelte/transition';
</script>
Lägg till funktionalitet för att visa/dölja ett element genom att skapa en boolean-variabel i scripttaggen, och sätt den till ’false’.
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Använd ett ”if”-block för att villkorligt rendera en div, och lägg till ett övergångsdirektiv på diven, med ”blur” som värde.
{#if visible}
<div transition:blur>Här är jag...</div>
{/if}
Lägg till en knapp för att ändra ’visible’-variabelns värde, och därmed visa/dölja diven.
<button on:click={()=>visible=!visible}>
{visible ? "Dölj" : "Visa"}
</button>
När du kör koden i webbläsaren ser du diven fade-in och fade-out vid klick på knappen.
Modulen ”svelte/transition” exporterar sju funktioner: fade, blur, fly, slide, scale, draw och crossfade. Övergångar i Svelte kan ta emot parametrar. Till exempel kan ”blur”-funktionen från exemplet tidigare acceptera: delay (fördröjning), duration (varaktighet), easing, opacity (opacitet) och amount (storlek på oskärpan).
Förutom parametrar, erbjuder Svelte även in- och ut-övergångar som ger dig finare kontroll. Tänk dig att du vill att ett element ska fade-in och slide-out. Då gör du så här:
<script>
import { blur, slide } from 'svelte/transition';
let visible = false;
</script>{#if visible}
<div in:blur out:slide>Här är jag...</div>
{/if}<button on:click={()=>visible=!visible}>
{visible ? "Dölj" : "Visa"}
</button>
Lägg märke till att div-elementet saknar ett ”transition”-direktiv. Istället har vi ”in”- och ”out”-direktiv med ”blur” respektive ”slide” som värden.
Animera Svelte-element
Det enklaste sättet att animera element i Svelte är med ”flip”-funktionen från ”svelte/animate”. ”Flip” står för ”First, Last, Invert, Play”. Funktionen accepterar tre parametrar: delay, duration och easing. Se följande exempel:
<script>
import { flip } from "svelte/animate";
let originalList = ["Tomater", "Bröd", "Fisk", "Mjölk", "Kattmat"];
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()}>Sortera</button>
<button on:click={() => shoppingList = [...originalList]}>Återställ</button>
Koden visar hur du använder ”animate”-direktivet i Svelte. Första raden importerar ”flip”-funktionen. Det finns två arrayer, ”originalList” och ”shoppingList”. En ”each”-loop renderar elementen i ”shoppingList” i en ”container”-div.
Child-diven i ”container” har ett ”animate”-direktiv som pekar på ”flip”-funktionen. Genom att klicka på ”Sortera” sorteras listan i bokstavsordning, och genom att klicka på ”Återställ” återställs den till ursprungligt skick. När du kör koden i en webbläsare ser du listan animeras när den sorteras eller återställs.
Varför är animation viktigt i webbapplikationer?
Animationer är mer än bara visuellt tilltalande; de är viktiga för att förbättra användarupplevelsen och kommunicera effektivt. Genom att kombinera estetik med funktionalitet ger animationer liv åt webbapplikationer, och gör dem engagerande och intuitiva.