Les stores spring() et tweened()
Animez des valeurs numériques avec des stores spring fondés sur la physique ou tweened fondés sur une durée.
Les stores spring() et tweened() est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Gestionnaires de mouvement
Svelte fournit des gestionnaires sensibles au mouvement : tweened (fondé sur une durée) et spring (fondé sur la physique).
Importation
Depuis svelte/motion.
import { tweened, spring } from "svelte/motion";Créer une interpolation
Transmettez une valeur initiale et des options telles que duration et easing.
const progress = tweened(0, { duration: 500 });Définir ou mettre à jour
Appelez set() ou update() ; le gestionnaire anime automatiquement le passage d'une valeur à l'autre.
progress.set(1);Créer un ressort
Les gestionnaires spring disposent des options stiffness et damping pour contrôler le comportement physique.
const coords = spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.25 });S'abonner avec $
Utilisez-les comme n'importe quel gestionnaire dans vos composants.
<p>{$progress}</p>Nombres et objets
Les deux gestionnaires interpolent les nombres et les structures contenant des propriétés numériques imbriquées.
Interpolation personnalisée
Transmettez une fonction interpolate personnalisée pour les valeurs non numériques, comme les couleurs.
Ressort sans animation
Appelez spring.set(value, { hard: true }) pour passer directement à la valeur sans animation.
Cas d'utilisation
Suivi de la souris, glisser-déposer, interface pilotée par le défilement, jauges et barres de progression.
Associer aux transformations
Appliquez la valeur animée à style="transform: ..." pour obtenir un mouvement fluide.
Vérification rapide
Quel gestionnaire produit un mouvement semblable à celui de la physique ?
Récapitulatif
tweened et spring, issus de svelte/motion, animent fluidement les valeurs numériques.
Questions Fréquemment Posées
La leçon « Les stores spring() et tweened() » est-elle gratuite ?
Oui — le texte complet de « Les stores spring() et tweened() » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Les stores spring() et tweened() » ?
Animez des valeurs numériques avec des stores spring fondés sur la physique ou tweened fondés sur une durée. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Les stores spring() et tweened() » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- animate:flip pour réordonner les listes
- Les stores spring() et tweened()
- Fonctions d’accélération personnalisées
- Combiner transitions et animations