Der spring()-Store: Physikbasierte Animation
Animieren Sie Werte mit konfigurierbarer Steifigkeit und Dämpfung für ein natürliches Verhalten.
Der spring()-Store: Physikbasierte Animation ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Federphysik
Der spring-Store animiert Werte mit Steifigkeit und Dämpfung wie eine echte Feder.
Importieren
Aus svelte/motion.
import { spring } from "svelte/motion";Eine Feder erstellen
Übergeben Sie einen Anfangswert und Optionen.
const pos = spring({ x: 0, y: 0 }, { stiffness: 0.2, damping: 0.4 });Zielwert aktualisieren
Setzen Sie ein neues Ziel; der Wert bewegt sich animiert darauf zu.
pos.set({ x: 100, y: 50 });Mit $ abonnieren
Verwenden Sie den Wert reaktiv im Markup.
<div style="transform: translate({$pos.x}px, {$pos.y}px);"></div>Mausbewegung folgen
Aktualisieren Sie das Ziel der Feder mit den Mauskoordinaten, damit sie dem Zeiger natürlich folgt.
Direkt setzen
Übergeben Sie { hard: true }, um sofort zum Zielwert zu springen.
pos.set({x: 0, y: 0}, { hard: true });Steifigkeit
Höhere Steifigkeit = schnelleres Einrasten in Richtung des Ziels.
Dämpfung
Höhere Dämpfung = weniger Schwingung. 1 bedeutet kein Nachfedern.
Vektoren und Objekte
Springs interpolieren numerische Werte in Arrays und verschachtelten Objekten.
Performance
Springs verwenden intern rAF. Auch bei vielen gleichzeitigen Instanzen laufen sie flüssig.
Kurzer Test
Was steuert die Steifigkeit einer spring?
Zusammenfassung
spring-Stores animieren mithilfe von Physik. Stimmen Sie stiffness und damping auf das gewünschte Verhalten ab.
Häufig gestellte Fragen
Ist die Lektion „Der spring()-Store: Physikbasierte Animation“ kostenlos?
Ja — der vollständige Text von „Der spring()-Store: Physikbasierte Animation“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Der spring()-Store: Physikbasierte Animation“?
Animieren Sie Werte mit konfigurierbarer Steifigkeit und Dämpfung für ein natürliches Verhalten. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Der spring()-Store: Physikbasierte Animation“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Der spring()-Store: Physikbasierte Animation
- Der tweened()-Store: Dauer und Easing
- Interpolationsfunktionen
- SVG-Pfade mit Motion animieren