Förståelse för övergångar och animeringar i Svelte
När det görs på rätt sätt kan animeringar förbättra användarupplevelsen och vara ett bra sätt att skicka feedback till användaren. Svelte gör det enkelt för dig att integrera animationer och övergångar i din applikation med mycket litet behov av JavaScript-bibliotek från tredje part.
Konfigurera ett Svelte-projekt
För att börja använda Svelte är det viktigt att se till att både Node.js runtime-miljön och Node Package Manager (NPM), som underlättar paketinstallation för JavaScript-applikationer, är korrekt installerade på din datorenhet. För att påbörja installationsprocessen öppnar du ett terminalfönster och utför följande kommando:
npm create vite
Namnge först ditt projekt och välj sedan Svelte som det föredragna ramverket. Därefter konfigurerar du det för att använda JavaScript genom att välja lämpligt alternativ i installationsprocessen. Därefter navigerar du till projektets rotmapp och utför de nödvändiga kommandona för installation av beroenden i terminalen eller kommandotolken.
npm install
Uppgiften kräver att du eliminerar överflödig kod från projektet genom att radera katalogerna “assets” och “lib” och rensa innehållet i filerna “App.svelte” och “App.css”.
Hur man använder Tweening i Svelte
Tweening är en metod som används inom både animation och datorgrafik och som innebär att man genererar mellanliggande bilder mellan två keyframes för att skapa sömlösa och naturligt utseende rörelser eller transformationer. Svelte-ramverket tillhandahåller ett effektivt sätt att använda denna teknik genom att använda numeriska värden för animerade element, vilket underlättar skapandet av smidiga och responsiva övergångar inom webbapplikationer.
Verktyget Tweened tillhör modulen Svelte/Motion och kan integreras i komponenter med hjälp av en importförklaring som följer den angivna syntaxen.
import { tweened } from 'svelte/motion'
Verktyget tweened i Svelte fungerar som ett anpassningsbart skrivbart lager, vilket gör det möjligt för användare att hantera applikationens tillstånd på ett effektivt sätt. Verktyget består av två primära metoder, nämligen “set” och “update”, som gör det möjligt för utvecklare att manipulera data på ett effektivt sätt. En tweened store har formen av ett JavaScript-objekt och är ett lättillgängligt sätt att övervaka och kontrollera utvecklingen av dynamiskt innehåll i en applikation.
const y = tweened(defaultValue, {
duration: [time-in-milliseconds],
easing: [easing-function],
})
initialvärdet för det bundna element som representeras av den första parametern, som fungerar som standardinställning för bindningen y ; och ett objekt som består av två egenskaper, nämligen duration och easing .Den förstnämnda anger tidsspannet i millisekunder som tweenen ska kvarstå, medan den sistnämnda anger den lättnadsfunktion som ska tillämpas under animeringsprocessen.
Easing-funktioner inom Svelte fastställer hur en övergång ska gå till, och de omfattas av modulen svelte/easing. Följaktligen måste man importera en viss funktion från denna domän för att kunna införliva den i tweened-förvaret. Svelte-ramverket innehåller en easing-visualiserare som gör det möjligt för användare att undersöka de beteendemönster som uppvisas av olika easing-funktioner.
För att effektivt demonstrera tween -verktygets kapacitet i en Svelte-miljö, se följande exempel där vi använder tween för att stegvis förstärka dimensionerna hos en komponent på skärmen.
<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>
Koden importerar två funktioner, tweened och bounceOut , som finns i respektive Svelte-moduler svelte/motion och svelte/easing . Därefter definieras och binds en konstant variabel till tweened store, vars standardvärde representeras av this.$options.animate=true; . Detta standardvärde kan nås med hjälp av symbolen $ . Slutligen accepterar funktionen tweened ett ytterligare argument, ett objekt som innehåller en egenskap easing som refererar till funktionen bounceOut easing som tillhandahålls av modulen svelte/easing .
Markeringssegmentet innehåller ett knappelement med ett onclick-attribut som anropar uppdateringsmetoden för storleksbindningen. När du klickar på knappen ökar uppdateringsmetoden butiksvariabeln för storlek med dollartecken med tre. Dessutom har div-elementet en inline-stil som styrs av värdet för dollartecknet size store. När filen körs i en webbläsare kommer användaren att se följande visuella presentation:
Transitions in Svelte
För att underlätta processen att införliva och ta bort element i Document Object Model (DOM) i Svelte, används ett direktiv som kallas “transition”-direktivet tillsammans med en dedikerad modul med namnet “svelte/transition”. Denna modul erbjuder en rad praktiska funktioner som kan användas tillsammans med “transition”-direktivet för olika ändamål. Som en illustration kan man använda funktionen “blur” som importerats från modulen “svelte/transition” för att skapa en fade-in eller fade-out effekt på ett element när det går in i eller ut ur DOM.
<script>
import { blur } from 'svelte/transition';
</script>
För att implementera möjligheten att montera och demontera element från Document Object Model (DOM), introducerar vi först en boolesk flagga som en skriptegenskap som initialt sätts till false . Detta fungerar som en indikator för elementets synlighet på sidan. Genom att använda denna funktion kan utvecklare effektivt hantera sin kods interaktion med DOM genom att växla synligheten för specifika element vid runtime.
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Här är ett exempel på hur man uppnår detta i Vue.js med hjälp av v-if-direktivet:html export default {data() {return {isBlur: false // sätt initialvärde endast för demonstrationssyfte};},computed: {/** definierar anpassade CSS-klasser baserat på isBlur prop */get blurClass() {return isBlur ? ‘blur’ : ‘’;}}};
{#if visible}
<div>Here I am...</div>
{/if}
Inkorporera det medföljande kodavsnittet i en HTML-fil och inkludera det som en del av innehållet på din webbsida. Koden kommer att visa ett stycke med en knapp som växlar synligheten för ett div-element som innehåller ytterligare information om produkten.
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
När koden körs i en webbläsare förväntas följande visuella presentation att observeras:
fade, blur, fly, slide, scale, draw och crossfade. Dessa övergångar är mycket anpassningsbara och kan konfigureras med olika parametrar, t.ex. fördröjning, varaktighet, lättnad, opacitet och mängd, som alla förbättrar eller ändrar deras effekter i enlighet med detta.
Visst! Vad sägs om det här? Förutom att styra övergångar baserat på egenskaper som enter eller exit , erbjuder Svelte en mer detaljerad metod genom in och ut övergångar. I vårt tidigare exempel vill vi t.ex. att elementet ska ha en suddig effekt när det går in och en glidande effekt när det går ut. Vi kan uppnå detta genom att använda lämpliga övergångar enligt följande:
<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>
I det ovan nämnda kodavsnittet är det värt att notera att övergångsdirektivet saknas från div-elementet. Istället har två övergångar specificerats med hjälp av keyframes-tekniken, nämligen “blur” och “slide”, som pekas ut av egenskaperna “from” och “to” i deras respektive @keyframe-regler.
Animating Svelte Elements
Först, Sist, Invertera, Spela upp.Den innehåller tre viktiga argument - fördröjning, varaktighet och lättnad - som är grundläggande för att skapa fängslande visuella effekter under animeringsprocesser. Låt oss undersöka följande exempelkod för att illustrera dess funktionalitet.
<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>
Det medföljande utdraget visar implementeringen av animate -direktivet i en Svelte-applikation. Inom taggen