Forstå overganger og animasjoner i Svelte

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 å inkludere animasjoner og overganger i applikasjonen din med svært lite behov for tredjeparts JavaScript-biblioteker.

Sette opp et Svelte-prosjekt

For å komme i gang med Svelte bør du sørge for det kjøretiden for Node.js og Node Package Manager (NPM) er riktig installert på datamaskinen. Åpne terminalen og kjør følgende kommando:

npm create vite

Dette vil stillaset en 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 eiendeler og lib mapper, og sletting av innholdet i App.svelte og App.css filer.

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 en

interpolert 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.

Tweened-verktøyet er en del av svelte/bevegelse modul. 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: sett 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 en tweened butikk. I butikken er det to parametere. Den første parameteren representerer standardverdien y binding skal ha. Den neste parameteren er et objekt med to nøkler varighet og lettelser. De varighet definerer hvor lenge interpoleringen skal vare i millisekunder mens lettelser definerer lettelsesfunksjonen.

Easing-funksjoner i Svelte definerer oppførselen til en tween. Disse funksjonene er en del av svelte/lettelser modul 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.