Sufle und Frühlingsanimationen

Frühlingsanimation ist eine hervorragende Möglichkeit, UI -Interaktionen zum Leben zu erwecken. Anstatt die Eigenschaften über einen bestimmten Zeitraum in einer konstanten Geschwindigkeit zu ändern, verwendet Spring Animation die Springphysik, um die Dinge zu bewegen, sodass die Menschen den Eindruck von echten Objekten vermitteln und den Benutzern ein natürlicheres Erlebnis verleihen.

Ich habe schon einmal über Frühlingsanimation geschrieben. Dieser Artikel basiert auf React und verwendet React-Spring zur Animation. In diesem Artikel werden ähnliche Ideen in Sufle untersucht.

CSS -Entwickler! Bei der Kontrolle von Animationseffekten denken Sie normalerweise an eine Lockerung. Sie können sich "Spring" -Animation als eine lockere Unterkategorie vorstellen, die auf der realen Physik basiert.

Svelte hat tatsächlich Federn in den Rahmen eingebaut, ohne dass externe Bibliotheken erforderlich sind. Wir werden die erste Hälfte des vorherigen Artikels über React-Fund-Spring überprüfen. Danach werden wir uns jedoch in den Einsatz von Federn in Sufle ausgraben und die tatsächliche Implementierung einem zukünftigen Artikel überlassen. Obwohl dies enttäuschend erscheint, verfügt SVELTEe einige einzigartige Merkmale, die nicht zu reagieren sind, um effektiv in diese Animationsprimitive zu integrieren. Wir werden uns einige Zeit nehmen, um sie zu besprechen.

Eine andere Sache zu beachten: Einige der in diesem Artikel durchgestrebten Demonstrationen mögen seltsam aussehen, da ich die Quellen als "elastisch" konfiguriert habe, um einen spürbareren Effekt zu erzielen. Wenn Sie Demo -Code verwendet haben, finden Sie unbedingt die für Sie geeignete Federkonfiguration.

Dies ist eine großartige Wiederholung von Rich Harris, um verschiedene Frühlingskonfigurationen und ihr Verhalten zu präsentieren.

Kurzer Beginn mit SufleTe Storage

Bevor wir anfangen, schauen wir uns einen kurzen Blick auf den SufleT -Speicher an. Während die Komponenten von Selte in der Lage sind, Status zu speichern und zu aktualisieren, verfügt SVELTE auch über das Speicherkonzept, sodass Sie den Zustand außerhalb der Komponente speichern können. Da die Spring -API von Seltiere Speicher verwendet, werden wir hier kurz die wichtigen Teile abdecken.

Um eine Instanz des Speichers zu erstellen, können wir den beschreibbaren Typ importieren und wie folgt erstellen:

 importieren {schriftlich} aus "svelte/store";
const klicks = beschreibbar (0);

Die Klickvariable ist ein Speicher mit einem Wert von 0. Es gibt zwei Möglichkeiten, den gespeicherten neuen Wert festzulegen: die Set- und Aktualisierungsmethoden. Der erstere erhält den Wert, der auf Speichern festgelegt wird, während der letztere eine Rückruffunktion erhält, die den aktuellen Wert akzeptiert und den neuen Wert zurückgibt.

 Funktion increment () {
  klicks.update (val => val 1);
}
Funktion SETTO5 () {
  klicks.set (5);
}

Wenn Sie den Staat nicht wirklich verwenden können, ist der Staat nutzlos. Zu diesem Zweck bietet der Store eine Abonnementmethode, mit der Sie Benachrichtigungen über neue Werte erhalten können. Wenn Sie sie jedoch innerhalb der Komponente verwenden, können Sie den Speichernamen mit einem $ -Scharakter präfixen, das Svelte nicht nur den gespeicherten aktuellen Wert anzeigt, sondern auch aktualisiert, wenn es ändert. Zum Beispiel:

<h1 id="Wert-Clicks"> Wert {$ Clicks}</h1>
Inkrement
Auf 5 einstellen

Dies ist ein vollständiges Beispiel für Arbeitscode. Der Speicher bietet viele andere Funktionen wie abgeleiteter Speicher (mit dem Sie den Speicher miteinander verknüpfen können), lesbarer Speicher und sogar die Möglichkeit, beim ersten Speicher benachrichtigt zu werden, und hat keinen Beobachter mehr. Für den Zweck dieses Artikels ist der oben gezeigte Code jedoch alles, worauf wir achten müssen. Weitere Informationen finden Sie in der SVELTE -Dokumentation oder dem interaktiven Tutorial.

Frühlingscrashkurs

Lassen Sie uns schnell die Feder und ihre Funktion vorstellen. Wir werden uns eine einfache Benutzeroberfläche ansehen, die die Rendering -Aspekte bestimmter Elemente (Deckkraft und Transformationen) verändert und dann die Animationsänderungen betrachten.

Dies ist eine minimale Svelte -Komponente, die zu einem wechselt<div> Deckkraft und zu einem anderen wechseln<code><div> X-Achsenkonvertierung (ohne Animation).<pre class="brush:php;toolbar:false">&lt;div style=&quot;opacity: {shown ? 1 : 0}&quot;&gt; Inhalt zum Umschalten&lt;/div&gt; &lt;br&gt;Umschalten &lt;hr&gt;&lt;div style=&quot;transform: translateX({moved}px)&quot;&gt;Ich bin eine Schachtel.&lt;/div&gt; &lt;br&gt;Bewegen Sie es!</pre> <p> Diese Änderungen gelten sofort. Lassen Sie uns also sehen, wie sie animieren können. Hier kommt die Feder ins Spiel. In Sufle ist eine Feder ein Speicher, auf dem wir den gewünschten Wert festlegen können, aber sie ändert sich nicht sofort, sondern speichert den Wert nach und nach mit Springphysik. Wir können dann unsere Benutzeroberfläche an diesen geänderten Wert binden, um einen schönen Animationseffekt zu erzielen. Mal sehen, wie es tatsächlich funktioniert.</p> <pre class="brush:php;toolbar:false"> Import {Spring} aus &quot;svelte/motion&quot;; const fadesspring = feder (1, {Steifheit: 0,1, Dämpfung: 0,5}); const transformspring = feder (0, {Steifheit: 0,2, Dämpfung: 0,1}); const togglefade = () =&gt; fadspring.update (val =&gt; (val? 0: 1)); const Toggletransform = () =&gt; Transformspring.Update (val =&gt; (val? 0: 500)); const snaptransform = () =&gt; Transformspring.Update (val =&gt; val, {hard: true}); &lt;div style=&quot;opacity: {$fadeSpring}&quot;&gt;Inhalt zu verblassen&lt;/div&gt; &lt;br&gt;Verblassen &lt;hr&gt;&lt;div style=&quot;transform: translateX({$transformSpring}px)&quot;&gt;Ich bin eine Schachtel.&lt;/div&gt; &lt;br&gt;Bewegen Sie es! Einrasten</pre> <p> Wir erhalten die Frühlingsfunktion von Svelte und setzen verschiedene Federinstanzen für Deckkraft und Transformationsanimationen. Die Konvertierungsfederkonfiguration wird absichtlich <em>sehr elastisch</em> eingestellt, um später zu zeigen, wie die Federanimation vorübergehend geschlossen und die erforderlichen Änderungen sofort angewendet werden kann (dies wird später nützlich sein). Am Ende des Skriptblocks befindet sich der Klick -Handler, mit dem die erforderlichen Eigenschaften festgelegt werden. Dann binden wir in HTML den geänderten Wert direkt an unser Element ... das war's! Das dreht sich alles um die grundlegende Frühlingsanimation in Sufle.</p> <p> Das einzige verbleibende Element ist die Snaptransform -Funktion, die die Konvertierungsfeder auf ihren aktuellen Wert einstellen, aber auch ein Objekt als zweiter Parameter übergeben, wo hart: True. Dies hat den Einfluss, die erforderlichen Werte sofort ohne Animation anzuwenden.</p> <p> Diese Demo und der Rest der grundlegenden Beispiele, die wir in diesem Artikel sehen werden, sind hier: [Der Demo -Link sollte hier eingefügt werden]</p> <p> ... (Die Pseudooriginalität des Restes des Artikels hält die ursprüngliche Bedeutung unverändert und behält die Position und das Format des Bildes bei.)</p> </div>