Forstå overgange og animationer i Svelte

Når det er gjort godt, kan animation forbedre brugeroplevelsen og kan være en god måde at sende feedback til brugeren på. Svelte gør det nemt for dig at inkorporere animationer og overgange i din applikation med meget lidt behov for tredjeparts JavaScript-biblioteker.

Opsætning af et Svelte-projekt

For at komme i gang med Svelte, bør du sørge for det Node.js runtime og Node Package Manager (NPM) er korrekt installeret på din computer. Åbn din terminal og kør følgende kommando:

npm create vite

Dette vil stilladsere en nyt Vite.js-projekt. Navngiv dit projekt, vælg Svelte som rammen, og sæt varianten til JavaScript. Skift derefter til projektbiblioteket og kør følgende kommando for at installere de nødvendige afhængigheder:

npm install

Fjern kedelpladekoden ved at slette aktiver og lib mapper og rydning af indholdet af App.svelte og App.css filer.

Sådan bruges Tweening i Svelte

Tweening er en teknik i animation og computergrafik, der genererer mellembilleder mellem keyframes for at skabe jævne og realistiske bevægelser eller overgange. Svelte tilbyder en

tweened værktøj, der giver dig mulighed for at animere elementer ved hjælp af numeriske værdier, hvilket gør det nemt at skabe flydende overgange og animationer i dine webapplikationer.

Det tweened-værktøj er en del af svelte/bevægelse modul. For at bruge tweened i din komponent, skal du importere den sådan her:

import { tweened } from'svelte/motion'

Under hætten er det tweened-værktøj kun en skrivbar Svelte-butik. En Svelte-butik er grundlæggende et JavaScript-objekt, som du kan bruge til at håndtere tilstandsstyring. Den tweenede butik har to metoder, nemlig: sæt og opdatering. På det grundlæggende niveau ser syntaksen for en tweened butik sådan her ud:

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

Kodeblokken ovenfor definerer en variabel y og binder det til en tweened butik. I butikken er der to parametre. Den første parameter repræsenterer standardværdien y binding skal have. Den næste parameter er et objekt med to nøgler varighed og lempelse. Det varighed definerer, hvor længe tweenen skal vare i millisekunder mens lempelse definerer lempelsesfunktionen.

Easing-funktioner i Svelte definerer adfærden for en tween. Disse funktioner er en del af svelte/lempelse modul, hvilket betyder, at du skal importere en specifik funktion fra modulet, før du kan sende den ind i det tweenede lager. Svelte har en easing visualizer, som du kan bruge til at udforske adfærden af ​​forskellige easing funktioner.

For fuldt ud at illustrere, hvordan du kan bruge tweened-værktøjet, er her et eksempel på brug af tweened-lageret til at øge størrelsen af ​​et element i Svelte.