Los stores spring() y tweened()
Anime valores numéricos con stores spring basados en física o stores tweened basados en duración
Los stores spring() y tweened() es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Stores de movimiento
Svelte proporciona stores que tienen en cuenta el movimiento: tweened (basado en la duración) y spring (basado en la física).
Importar
Desde svelte/motion.
import { tweened, spring } from "svelte/motion";Crear un store tweened
Pase un valor inicial y opciones como duration y easing.
const progress = tweened(0, { duration: 500 });Establecer o actualizar
Llame a set() o update(); el store anima automáticamente la transición entre valores.
progress.set(1);Crear un store spring
Los stores spring tienen las opciones stiffness y damping para definir el comportamiento físico.
const coords = spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.25 });Suscribirse con $
Utilícelos como cualquier otro store en los componentes.
<p>{$progress}</p>Números y objetos
Ambos stores interpolan números y estructuras con propiedades numéricas anidadas.
Interpolación personalizada
Pase una función personalizada interpolate para valores no numéricos, como los colores.
Forzar spring
Llame a spring.set(value, { hard: true }) para cambiar de valor sin animación.
Casos de uso
Seguimiento del ratón, arrastre, interfaces controladas por el desplazamiento, indicadores y barras de progreso.
Combinar con transformaciones
Aplique el valor animado a style="transform: ..." para conseguir un movimiento fluido.
Comprobación rápida
¿Qué store proporciona un movimiento similar al de la física?
Resumen
tweened y spring, de svelte/motion, animan valores numéricos suavemente.
Preguntas frecuentes
¿La lección «Los stores spring() y tweened()» es gratis?
Sí — el texto completo de «Los stores spring() y tweened()» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Los stores spring() y tweened()»?
Anime valores numéricos con stores spring basados en física o stores tweened basados en duración Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Los stores spring() y tweened()»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- animate:flip para reordenar listas
- Los stores spring() y tweened()
- Funciones de easing personalizadas
- Combinación de transiciones y animaciones