Gli store spring() e tweened()
Animi valori numerici con store spring basati sulla fisica o store tweened basati sulla durata.
Gli store spring() e tweened() è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Store per il movimento
Svelte fornisce store che gestiscono il movimento: tweened (basato sulla durata) e spring (basato sulla fisica).
Importazione
Da svelte/motion.
import { tweened, spring } from "svelte/motion";Creazione di tweened
Passi un valore iniziale e opzioni come duration ed easing.
const progress = tweened(0, { duration: 500 });Impostazione o aggiornamento
Chiami set() o update(); lo store anima automaticamente il passaggio tra i valori.
progress.set(1);Creazione di spring
Gli store spring dispongono delle opzioni stiffness e damping per definire il comportamento fisico.
const coords = spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.25 });Sottoscrizione con $
Li utilizzi come qualsiasi altro store nei componenti.
<p>{$progress}</p>Numeri e oggetti
Entrambi gli store interpolano numeri e strutture con proprietà numeriche annidate.
Interpolazione personalizzata
Passi una funzione interpolate personalizzata per valori non numerici, come i colori.
Spring immediato
Chiami spring.set(value, { hard: true }) per passare direttamente al valore senza animazione.
Casi d'uso
Rilevamento del mouse, trascinamento, interfacce guidate dallo scorrimento, indicatori e barre di avanzamento.
Combinazione con le trasformazioni
Applichi il valore animato a style="transform: ..." per ottenere un movimento fluido.
Controllo rapido
Quale store fornisce un movimento simile a quello fisico?
Riepilogo
tweened e spring di svelte/motion animano in modo fluido i valori numerici.
Domande Frequenti
La lezione «Gli store spring() e tweened()» è gratuita?
Sì — il testo completo di «Gli store spring() e tweened()» è 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 «Gli store spring() e tweened()»?
Animi valori numerici con store spring basati sulla fisica o store tweened basati sulla durata. 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 2 di 4.
Quanto tempo richiede la lezione «Gli store spring() e tweened()»?
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
- animate:flip per il riordinamento delle liste
- Gli store spring() e tweened()
- Funzioni easing personalizzate
- Combinazione di transizioni e animazioni