Förstå övergångar och animationer i Svelte

När den görs väl kan animering förbättra användarupplevelsen och kan vara ett bra sätt att skicka feedback till användaren. Svelte gör det enkelt för dig att införliva animationer och övergångar i din applikation med mycket litet behov av JavaScript-bibliotek från tredje part.

Skapa ett Svelte-projekt

För att komma igång med Svelte bör du se till att körtiden för Node.js och Nod Package Manager (NPM) är korrekt installerade på din dator. Öppna din terminal och kör följande kommando:

npm create vite

Detta kommer att bygga en nytt Vite.js-projekt. Namnge ditt projekt, välj Svelte som ram, och ställ in varianten till JavaScript. Byt sedan till projektkatalogen och kör följande kommando för att installera nödvändiga beroenden:

npm install

Ta bort boilerplate-koden genom att ta bort tillgångar och lib mappar och rensa innehållet i App.svelte och App.css filer.

Hur man använder Tweening i Svelte

Tweening är en teknik inom animation och datorgrafik som genererar mellanliggande bildrutor mellan nyckelbildrutor för att skapa jämna och realistiska rörelser eller övergångar. Svelte erbjuder en

interpolerade verktyg som låter dig animera element med hjälp av numeriska värden, vilket gör det enkelt att skapa flytande övergångar och animationer i dina webbapplikationer.

Det interpolerade verktyget är en del av svelte/rörelse modul. För att använda interpolerad i din komponent måste du importera den så här:

import { tweened } from'svelte/motion'

Under huven är det interpolerade verktyget bara en skrivbar Svelte-butik. En Svelte-butik är i grunden ett JavaScript-objekt som du kan använda för att hantera tillståndshantering. Den interpolerade butiken har två metoder, nämligen: uppsättning och uppdatering. På grundnivån ser syntaxen för en interpolerad butik ut ungefär så här:

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

Kodblocket ovan definierar en variabel y och binder den till en interpolerad butik. I butiken finns två parametrar. Den första parametern representerar standardvärdet y bindning bör ha. Nästa parameter är ett objekt med två nycklar varaktighet och lättnader. De varaktighet definierar hur länge interpoleringen ska pågå i millisekunder medan lättnader definierar lättnadsfunktionen.

Lättningsfunktioner i Svelte definierar beteendet för en interpolering. Dessa funktioner är en del av slanka/lättande modul vilket innebär att du måste importera en specifik funktion från modulen innan du kan skicka den till den interpolerade butiken. Svelte har en lättnadsvisualiserare som du kan använda för att utforska beteendet hos olika lättnadsfunktioner.

För att fullständigt illustrera hur du kan använda det interpolerade verktyget, här är ett exempel på hur du använder det interpolerade lagret för att öka storleken på ett element i Svelte.