Overgangen en animaties in Svelte begrijpen

Als animatie goed wordt uitgevoerd, kan dit de gebruikerservaring verbeteren en een geweldige manier zijn om feedback naar de gebruiker te sturen. Met Svelte kunt u eenvoudig animaties en overgangen in uw toepassing opnemen, zonder dat u JavaScript-bibliotheken van derden nodig heeft.

Een slank project opzetten

Om met Svelte aan de slag te kunnen, moet u daar zeker van zijn de Node.js-runtime En Knooppuntpakketbeheer (NPM) correct op uw computer zijn geïnstalleerd. Open uw terminal en voer de volgende opdracht uit:

npm create vite

Dit zal een steiger vormen nieuw Vite.js-project. Geef uw project een naam, selecteer Slank als raamwerk en stel de variant in JavaScript. Schakel vervolgens over naar de projectmap en voer de volgende opdracht uit om de benodigde afhankelijkheden te installeren:

npm install

Verwijder de standaardcode door de activa En libr mappen en het wissen van de inhoud van de App.svelte En App.css bestanden.

Tweening gebruiken in Svelte

Tweening is een techniek in animatie en computergraphics die tussenframes tussen keyframes genereert om vloeiende en realistische bewegingen of overgangen te creëren. Svelte biedt een getweend hulpprogramma waarmee u elementen kunt animeren met behulp van numerieke waarden, waardoor u eenvoudig vloeiende overgangen en animaties in uw webapplicaties kunt maken.

Het getweende hulpprogramma is een onderdeel van het slank/beweging module. Als u tweened in uw component wilt gebruiken, moet u deze als volgt importeren:

import { tweened } from'svelte/motion'

Onder de motorkap is het getweende hulpprogramma slechts een beschrijfbare Svelte-winkel. Een Svelte-winkel is in feite een JavaScript-object dat u kunt gebruiken om statusbeheer af te handelen. De getweende winkel heeft twee methoden, namelijk: set En update. Op basisniveau ziet de syntaxis voor een getweende winkel er ongeveer zo uit:

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

Het bovenstaande codeblok definieert een variabele j en bindt het aan een getweende winkel. In de winkel zijn er twee parameters. De eerste parameter vertegenwoordigt de standaardwaarde the j binding zou moeten hebben. De volgende parameter is een object met twee sleutels duur En versoepeling. De duur definieert hoe lang de tween moet duren in milliseconden while versoepeling definieert de versoepelingsfunctie.

Versoepelingsfuncties in Svelte definiëren het gedrag van een tween. Deze functies maken deel uit van de slank/versoepelend module, wat betekent dat u een specifieke functie uit de module moet importeren voordat u deze kunt doorgeven aan de getweende winkel. Svelte heeft een versoepelingsvisualisatie die u kunt gebruiken om het gedrag van verschillende versoepelingsfuncties te verkennen.

Om volledig te illustreren hoe u het getweende hulpprogramma kunt gebruiken, volgt hier een voorbeeld van het gebruik van de getweende winkel om de grootte van een element in Svelte te vergroten.