Lo store spring(): animazione basata sulla fisica
Animi i valori con rigidità e smorzamento configurabili per un effetto naturale.
Lo store spring(): animazione basata sulla fisica è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Fisica delle molle
Lo store spring anima i valori con rigidità e smorzamento, come una vera molla.
Importare
Da svelte/motion.
import { spring } from "svelte/motion";Creare una spring
Passi un valore iniziale e le opzioni.
const pos = spring({ x: 0, y: 0 }, { stiffness: 0.2, damping: 0.4 });Aggiornare l'obiettivo
Imposti un nuovo obiettivo; il valore si anima verso di esso.
pos.set({ x: 100, y: 50 });Sottoscriversi con $
Utilizzi il valore in modo reattivo nel markup.
<div style="transform: translate({$pos.x}px, {$pos.y}px);"></div>Seguire il mouse
Aggiorni l'obiettivo della spring con le coordinate del mouse per seguire il puntatore in modo naturale.
Impostazione immediata
Passi { hard: true } per eseguire il salto immediatamente.
pos.set({x: 0, y: 0}, { hard: true });Rigidità
Una rigidità maggiore fa scattare più rapidamente il valore verso l'obiettivo.
Smorzamento
Uno smorzamento maggiore riduce l'oscillazione. 1 significa nessun rimbalzo.
Vettori e oggetti
Le spring interpolano i valori numerici contenuti in array e oggetti annidati.
Prestazioni
Le spring utilizzano internamente rAF. Rimangono fluide anche con molte istanze simultanee.
Verifica rapida
Che cosa controlla la rigidità di spring?
Riepilogo
Gli store spring animano usando la fisica. Regoli stiffness e damping per ottenere l'effetto desiderato.
Domande Frequenti
La lezione «Lo store spring(): animazione basata sulla fisica» è gratuita?
Sì — il testo completo di «Lo store spring(): animazione basata sulla fisica» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Lo store spring(): animazione basata sulla fisica»?
Animi i valori con rigidità e smorzamento configurabili per un effetto naturale. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Lo store spring(): animazione basata sulla fisica»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Lo store spring(): animazione basata sulla fisica
- Lo store tweened(): durata ed easing
- Funzioni di interpolazione
- Animazione dei tracciati SVG con Motion