Le store tweened() : durée et accélération
Interpoler des valeurs sur une durée fixe avec une accélération intégrée ou personnalisée.
Le store tweened() : durée et accélération 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.
Fondé sur la durée
Le magasin tweened anime une valeur sur une durée fixe avec une fonction d’assouplissement.
En créer un
Transmettez une valeur initiale et des options.
import { tweened } from "svelte/motion";
const p = tweened(0, { duration: 500, easing: cubicOut });Animer vers une cible
Appelez set avec la nouvelle valeur. Le magasin l’anime sur la durée indiquée.
p.set(100);Méthode de mise à jour
Animez à partir de la valeur actuelle.
p.update(n => n + 1);S’abonner
Utilisez $p dans le balisage.
<progress value={$p} max="100"></progress>Assouplissement personnalisé
Transmettez n’importe quelle fonction d’assouplissement provenant de svelte/easing, ou créez la vôtre.
Cibles objets
Comme les ressorts, les magasins à durée fixe peuvent animer les valeurs d’objets.
Remplacer à chaque appel
set accepte un second argument d’options pour remplacer la durée ou l’assouplissement d’une seule transition.
p.set(0, { duration: 1000 });Quand l’utiliser
Préférez le magasin à durée fixe au ressort lorsque vous avez besoin d’un mouvement prévisible et fondé sur le temps.
Cas d’utilisation
Barres de progression, indicateurs et animations séquencées.
Performances
Comme les ressorts, les magasins à durée fixe utilisent rAF en interne pour produire des mouvements fluides.
Vérification rapide
Quelle est la principale différence entre un magasin à durée fixe et un ressort ?
Récapitulatif
tweened anime les valeurs sur une durée fixe avec un assouplissement. Utilisez-le pour des mouvements prévisibles et fondés sur le temps.
Questions Fréquemment Posées
La leçon « Le store tweened() : durée et accélération » est-elle gratuite ?
Oui — le texte complet de « Le store tweened() : durée et accélération » 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 « Le store tweened() : durée et accélération » ?
Interpoler des valeurs sur une durée fixe avec une accélération intégrée ou personnalisé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 « Le store tweened() : durée et accélération » ?
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
- Le store spring() : animation fondée sur la physique
- Le store tweened() : durée et accélération
- Fonctions d’interpolation
- Animer des tracés SVG avec le mouvement