Verleihen Sie Ihren Svelte-Apps Leben, indem Sie Übergänge und fesselnde Animationen integrieren.

Wenn Animationen gut gemacht werden, können sie das Benutzererlebnis verbessern und eine großartige Möglichkeit sein, dem Benutzer Feedback zu senden. Svelte macht es Ihnen leicht, Animationen und Übergänge in Ihre Anwendung zu integrieren, ohne dass Sie dafür JavaScript-Bibliotheken von Drittanbietern benötigen.

Einrichten eines Svelte-Projekts

Um mit Svelte loslegen zu können, sollten Sie dies sicherstellen die Node.js-Laufzeit Und Knotenpaketmanager (NPM) ordnungsgemäß auf Ihrem Computer installiert sind. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:

npm create vite

Dies wird ein Gerüst sein neues Vite.js-Projekt. Benennen Sie Ihr Projekt, wählen Sie es aus Schlank als Framework und legen Sie die Variante auf fest JavaScript. Wechseln Sie dann in das Projektverzeichnis und führen Sie den folgenden Befehl aus, um die erforderlichen Abhängigkeiten zu installieren:

npm install
instagram viewer

Entfernen Sie den Boilerplate-Code, indem Sie die löschen Vermögenswerte Und lib Ordner und Löschen des Inhalts der App.svelte Und App.css Dateien.

So verwenden Sie Tweening in Svelte

Tweening ist eine Technik in der Animation und Computergrafik, die Zwischenbilder zwischen Schlüsselbildern generiert, um sanfte und realistische Bewegungen oder Übergänge zu erzeugen. Svelte bietet a gezwickt Dienstprogramm, mit dem Sie Elemente mithilfe numerischer Werte animieren können, sodass Sie ganz einfach fließende Übergänge und Animationen in Ihren Webanwendungen erstellen können.

Das getweente Dienstprogramm ist Teil des Schlankheit/Bewegung Modul. Um Tweened in Ihrer Komponente zu verwenden, müssen Sie es wie folgt importieren:

import { tweened } from'svelte/motion'

Unter der Haube ist das getweente Dienstprogramm nur ein beschreibbarer Svelte-Speicher. Ein Svelte-Store ist im Grunde ein JavaScript-Objekt, das Sie für die Statusverwaltung verwenden können. Der getweente Store verfügt über zwei Methoden: Satz Und aktualisieren. Auf der Grundebene sieht die Syntax für einen Tween-Store etwa so aus:

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

Der obige Codeblock definiert eine Variable j und bindet es an einen Tween-Speicher. Im Store gibt es zwei Parameter. Der erste Parameter stellt den Standardwert dar j Bindung sollte haben. Der nächste Parameter ist ein Objekt mit zwei Schlüsseln Dauer Und Lockerung. Der Dauer Definiert, wie lange das Tween in Millisekunden dauern soll Lockerung definiert die Beschleunigungsfunktion.

Beschleunigungsfunktionen in Svelte definieren das Verhalten eines Tweens. Diese Funktionen sind Teil der schlank/lockerend Das bedeutet, dass Sie eine bestimmte Funktion aus dem Modul importieren müssen, bevor Sie sie an den Tween-Speicher übergeben können. Svelte verfügt über einen Easing-Visualizer, mit dem Sie das Verhalten verschiedener Easing-Funktionen untersuchen können.

Um vollständig zu veranschaulichen, wie Sie das Tweened-Dienstprogramm verwenden können, finden Sie hier ein Beispiel für die Verwendung des Tweened-Stores zum Erhöhen der Größe eines Elements in Svelte.