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.

Indholdsfortegnelse

Opsætning af et Svelte-projekt

For at komme i gang med Svelte, bør du sørge for, at 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 et nyt Vite.js-projekt. Navngiv dit projekt, vælg Svelte som ramme, og indstil varianten til JavaScript. Skift derefter til projektbiblioteket og kør følgende kommando for at installere de nødvendige afhængigheder:

 npm install

Fjern boilerplate-koden ved at slette aktiverne og lib-mapperne og rydde indholdet af App.svelte- og App.css-filerne.

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 et 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 tweenede hjælpeprogram er en del af svelte/motion-modulet. 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 den til et tweened lager. I butikken er der to parametre. Den første parameter repræsenterer standardværdien, som y-bindingen skal have. Den næste parameter er et objekt med to taster varighed og lempelse. Varigheden 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/easing-modulet, 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.

 <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))}>Increase size</button>
<style>
  .container{
    display: flex;
    align-items: flex-end;
    margin-top: 400px;
  }
  div{
    height:0;
    width:100px;
    background-color: red;
  }
</style>

Kodeblokken ovenfor importerer to funktioner: tweened og bounceOut fra henholdsvis svelte/motion- og svelte/easing-modulerne. Dernæst er der en konstant variabel, der er bundet til det tweenede lager. Denne butik har en standardværdi på 0. Denne standardværdi (butiksværdi) kan tilgås med $-symbolet. Den næste parameter i den tweenede funktion er et objekt med en easing-tast, der peger på bounceOut easing-funktionen.

I markup-sektionen har knapelementet et on:click-direktiv, der kalder opdateringsmetoden på størrelsesbindingen. Denne metode øger $size butiksværdien med 3, hver gang du klikker på knappen. div-elementet har en inline-styling, der er afhængig af $size-butiksværdien. Når du kører denne kode i browseren, skal du se dette:

Overgange i Svelte

For at overføre elementer ind og ud af Document Object Model (DOM) har Svelte et overgangsdirektiv og et modul kaldet svelte/transition, der eksporterer nyttige funktioner, som du kan bruge med overgangsdirektivet. For at sløre et element ind og ud af en DOM, skal du først importere sløringsfunktionen fra svelte/transition:

 <script>
import { blur } from 'svelte/transition';
</script>

Tilføj derefter funktionaliteten til at montere og afmontere et element fra DOM. I script-tagget skal du oprette en synlig variabel og indstille den til falsk.

 <script>
import { blur } from 'svelte/transition';
let visible = false;
</script>

Brug derefter hvis-blokken til at betinget gengive en div. Sørg for at tilføje et overgangsdirektiv på div’en og indstille det til at sløre

 {#if visible}
<div>Here I am...</div>
{/if}

Tilføj derefter en knap for at vise eller skjule div.

 <button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>

Når du kører koden i browseren, skal du se dette:

Svelte/transition-modulet eksporterer syv funktioner, nemlig: fade, blur, fly, slide, scale, draw og crossfade. Overgange i Svelte kan acceptere parametre. For eksempel kan sløringsfunktionen fra eksemplet tidligere acceptere følgende parametre: forsinkelse, varighed, easing (easing-funktionen), opacitet og mængde (sløringens størrelse).

Udover parametre på overgange tilbyder Svelte også ind- og udovergange, der giver dig finere kontrol over et elements overgang. Overvej det sidste eksempel, hvad hvis du ønskede, at elementets indgangsovergang skulle være sløret, og dets udgangsovergang skulle glide? Sådan gør du:

 <script>
  import { blur, slide } from 'svelte/transition';
  let visible = false;
  </script>{#if visible}
<div in:blur out:slide>Here I am...</div>
{/if}
<button on:click={()=>visible=!visible}>
  {visible ? "Hide" : "Show"}
  </button>

Bemærk i kodeblokken ovenfor, hvordan der ikke er nogen overgangsdirektiv på div-elementet. I stedet er overgangsdirektivet erstattet med ind- og ud-direktiver, der peger på henholdsvis sløring og glidning.

Animering af Svelte Elements

Den mest bekvemme måde at animere elementer i Svelte er ved at bruge vendefunktionen fra svelte/animate. flip står for “First, Last, Invert, Play”. Den accepterer tre parametre, nemlig: forsinkelse, varighed og lempelse. Tag et kig på følgende kode:

 <script>
  import { flip } from "svelte/animate";
  let originalList = ["Tomatoes", "Bread", "Fish", "Milk", "Cat food"];
  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()}>Arrange</button>
<button on:click={() => shoppingList = [...originalList]}>Reset</button>

Kodeblokken illustrerer, hvordan du kan bruge det animerede direktiv i Svelte. I script-tagget importerer den første linje vendefunktionen. Der er to arrays, originalList og shoppingList. I “container” div’en er nøgleblokken ansvarlig for at gengive hvert element i shoppingList-arrayet.

Den underordnede div af “container” div har et animeret direktiv, der peger på flip-funktionen. Et tryk på den første knap vil sortere listen alfabetisk, mens et tryk på den anden knap vil nulstille listen. Når du kører koden i browseren, skal du se dette:

Hvorfor er animation vigtig i enhver webapplikation?

Betydningen af animationer rækker ud over blot visuel appel; de indkapsler essensen af forbedring af brugeroplevelsen og effektiv kommunikation. Ved sømløst at blande æstetik med funktionalitet puster animation liv i webapplikationer, hvilket gør dem ikke kun engagerende, men også intuitive.