Overgangen en animaties in Svelte begrijpen
Als animaties goed worden uitgevoerd, kunnen ze de gebruikerservaring verbeteren en een geweldige manier zijn om feedback naar de gebruiker te sturen. Met Svelte kun je eenvoudig animaties en overgangen in je applicatie opnemen zonder dat je JavaScript-bibliotheken van derden nodig hebt.
Een Svelte-project opzetten
Om Svelte te kunnen gebruiken, is het essentieel om ervoor te zorgen dat zowel de Node.js runtime-omgeving als de Node Package Manager (NPM), die de installatie van pakketten voor JavaScript-toepassingen vergemakkelijkt, voldoende geïnstalleerd zijn op je computer. Open een terminalvenster en voer het volgende commando uit om het installatieproces te starten:
npm create vite
Geef eerst je project een naam en kies dan Svelte als voorkeursraamwerk. Configureer het vervolgens om JavaScript te gebruiken door de juiste optie te selecteren in het installatieproces. Navigeer daarna naar de hoofdmap van het project en voer de vereiste installatiecommando’s uit op de terminal of opdrachtprompt.
npm install
De taak vereist het verwijderen van overbodige code uit het project door de mappen “assets” en “lib” te verwijderen en de inhoud van de bestanden “App.svelte” en “App.css” te verwijderen.
Hoe Tweening gebruiken in Svelte
Tweening verwijst naar een methode die wordt gebruikt in zowel animatie als computer graphics, waarbij tussenframes worden gegenereerd tussen twee keyframes om naadloze en natuurlijk ogende bewegingen of transformaties te produceren. Het Svelte framework biedt een efficiënte manier om deze techniek te gebruiken door numerieke waarden te gebruiken voor geanimeerde elementen, waardoor het creëren van vloeiende en responsieve overgangen binnen webapplicaties wordt vergemakkelijkt.
Het hulpprogramma Tweened behoort tot de module Svelte/Motion en kan in componenten worden geïntegreerd door middel van een importverklaring die de gespecificeerde syntaxis volgt.
import { tweened } from 'svelte/motion'
Het hulpprogramma Tweened in Svelte functioneert als een aanpasbare schrijfbare opslag, waarmee gebruikers de toestand van hun toepassing effectief kunnen beheren. Dit hulpprogramma bestaat uit twee primaire methoden, namelijk “set” en “update”, waarmee ontwikkelaars gegevens efficiënt kunnen manipuleren. In wezen heeft een tweened store de vorm van een JavaScript-object en biedt het een toegankelijke manier om de evolutie van dynamische inhoud binnen een applicatie te overzien en te beheren.
const y = tweened(defaultValue, {
duration: [time-in-milliseconds],
easing: [easing-function],
})
de beginwaarde van het gebonden element dat wordt vertegenwoordigd door de eerste parameter, die dient als standaardinstelling voor de y binding; en een object dat bestaat uit twee eigenschappen, namelijk duration en easing .De eerste specificeert de tijdspanne in milliseconden die de tween zal aanhouden, terwijl de tweede de easing-functie aanwijst die tijdens het animatieproces moet worden toegepast.
Easing-functies binnen het domein van Svelte bepalen het gedrag voor een overgang en ze vallen onder de module svelte/easing. Daarom moet een bepaalde functie uit dit domein worden geïmporteerd om deze op te nemen in de tweened repository. Het Svelte framework heeft een easing visualiser, waarmee gebruikers de gedragspatronen van verschillende easing functies kunnen onderzoeken.
Om de mogelijkheden van het hulpprogramma tween binnen een Svelte-omgeving effectief te demonstreren, beschouwen we het volgende voorbeeld waarin we de opslag tween gebruiken om de afmetingen van een component op het scherm stapsgewijs te vergroten.
<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>
De code importeert twee functies, tweened en bounceOut , die zich in de respectievelijke Svelte-modules svelte/motion en svelte/easing bevinden. Vervolgens wordt een constante variabele gedefinieerd en gebonden aan de tweened opslag, waarvan de standaardwaarde wordt weergegeven door this.$options.animate=true; . Deze standaardwaarde is toegankelijk met het symbool $ . Ten slotte accepteert de functie tweened een extra argument, een object dat een eigenschap easing bevat die verwijst naar de functie bounceOut easing die wordt geleverd door de module svelte/easing .
Het markupsegment bevat een knopelement met een onclick-attribuut dat de updatemethode van de omvangbinding aanroept. Als er op de knop wordt geklikt, verhoogt de update-methode de opslagvariabele voor de grootte van het dollarteken met drie. Bovendien heeft het div-element een inline stijl die wordt bepaald door de waarde van het dollarteken. Bij uitvoering in een webbrowser ziet de gebruiker de volgende visuele presentatie:
Overgangen in Svelte
Om het proces van het opnemen en verwijderen van elementen binnen het Document Object Model (DOM) in Svelte te vergemakkelijken, wordt een richtlijn gebruikt die bekend staat als de “overgang”-richtlijn, samen met een speciale module met de naam “svelte/transition”. Deze module biedt een aantal praktische functies die naast de “transition” richtlijn voor verschillende doeleinden gebruikt kunnen worden. Je kunt bijvoorbeeld de functie “blur” gebruiken die is geïmporteerd uit de module “svelte/transition” om een fade-in of fade-out effect te creëren op een element als het het DOM binnenkomt of verlaat.
<script>
import { blur } from 'svelte/transition';
</script>
Om de mogelijkheid te implementeren om elementen aan en af te koppelen van het Document Object Model (DOM), introduceer je eerst een booleaanse vlag als een scripteigenschap die aanvankelijk is ingesteld op false . Dit dient als een zichtbaarheidsindicator voor het element op de pagina. Door deze functie te gebruiken, kunnen ontwikkelaars de interactie van hun code met het DOM efficiënt beheren door de zichtbaarheid van specifieke elementen tijdens runtime aan te passen.
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Zeker, hier is een voorbeeld van hoe dit te bereiken in Vue.js met behulp van de v-if richtlijn:html export default {data() {return {isBlur: false // stel initiële waarde in voor demonstratiedoeleinden};},computed: {/** definieert aangepaste CSS-klassen op basis van de isBlur prop */get blurClass() {return isBlur ? ‘blur’ : ‘’;}};
{#if visible}
<div>Here I am...</div>
{/if}
Neem het bijgeleverde codefragment op in een HTML-bestand en neem het op als onderdeel van de inhoud van je webpagina. De code toont een paragraaf met een knop die de zichtbaarheid van een div-element met aanvullende informatie over het product wijzigt.
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
Bij het uitvoeren van de code in een webbrowseromgeving wordt de volgende visuele weergave verwacht:
fade, blur, fly, slide, scale, draw en crossfade. Deze overgangen zijn in hoge mate aanpasbaar en kunnen worden geconfigureerd met verschillende parameters, zoals vertraging, duur, versoepeling, ondoorzichtigheid en hoeveelheid, die elk dienen om hun effecten dienovereenkomstig te verbeteren of te wijzigen.
Zeker! Wat dacht je hiervan? Naast het regelen van overgangen op basis van eigenschappen zoals enter of exit , biedt Svelte een meer granulaire aanpak door middel van in en out overgangen. Neem bijvoorbeeld ons vorige voorbeeld waarin we willen dat het element een vervagingseffect heeft bij het binnenkomen en een glijdend effect bij het verlaten. We kunnen dit bereiken door de juiste overgangen als volgt te gebruiken:
<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>
In het bovenstaande codefragment moet worden opgemerkt dat de richtlijn voor overgangen ontbreekt in het div-element. In plaats daarvan zijn er twee overgangen gespecificeerd met behulp van de keyframetechniek, namelijk “vervagen” en “verschuiven”, waarnaar wordt verwezen door de eigenschappen “van” en “naar” van hun respectieve @keyframe-regels.
Smalle elementen animeren
Eerste, laatste, omkeren, afspelen.Het bevat drie cruciale argumenten - delay, duration en easing - die fundamenteel zijn voor het creëren van boeiende visuele effecten tijdens animatieprocessen. Laten we de volgende voorbeeldcode bekijken om de functionaliteit te illustreren.
<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>
Het gegeven fragment demonstreert de implementatie van de richtlijn animeren binnen een Svelte-toepassing. Binnen de