El store tweened(): duración y easing
Interpola valores durante una duración fija con easing integrado o personalizado
El store tweened(): duración y easing 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.
Basado en duración
El store tweened anima durante una duración fija con una función de easing.
Cree uno
Pase el valor inicial y las opciones.
import { tweened } from "svelte/motion";
const p = tweened(0, { duration: 500, easing: cubicOut });Anime hasta un objetivo
Llame a set con el nuevo valor. El store se anima durante la duración indicada.
p.set(100);Método de actualización
Anime basándose en el valor actual.
p.update(n => n + 1);Suscríbase
Utilice $p en el marcado.
<progress value={$p} max="100"></progress>Easing personalizado
Pase cualquier función de easing de svelte/easing o una propia.
Objetivos de tipo objeto
Al igual que spring, tweened puede animar valores de tipo objeto.
Sobrescritura por llamada
set acepta un segundo argumento de opciones para sobrescribir duration o easing en una transición concreta.
p.set(0, { duration: 1000 });Cuándo usarlo
Prefiera tweened a spring cuando necesite un movimiento predecible basado en el tiempo.
Casos de uso
Barras de progreso, indicadores y animaciones secuenciadas.
Rendimiento
Al igual que spring, tweened utiliza rAF internamente para lograr un movimiento fluido.
Comprobación rápida
¿Cuál es la principal diferencia entre tweened y spring?
Resumen
tweened anima valores durante una duración fija con easing. Utilícelo para movimientos predecibles basados en el tiempo.
Preguntas frecuentes
¿La lección «El store tweened(): duración y easing» es gratis?
Sí — el texto completo de «El store tweened(): duración y easing» 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 «El store tweened(): duración y easing»?
Interpola valores durante una duración fija con easing integrado o personalizado 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 «El store tweened(): duración y easing»?
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
- El store spring(): animación basada en física
- El store tweened(): duración y easing
- Funciones de interpolación
- Animación de trazados SVG con Motion