Funciones de easing personalizadas
Escriba o importe funciones de easing para controlar el ritmo de las animaciones
Funciones de easing personalizadas es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 3 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.
Qué es el easing
Una función de easing asigna el tiempo lineal (de 0 a 1) a una curva de progreso no lineal, lo que aporta personalidad a las animaciones.
Firma de la función
Una función de easing recibe t dentro de [0, 1] y devuelve el progreso ajustado.
function linear(t) { return t; }Biblioteca integrada
svelte/easing de Svelte exporta curvas habituales: linear, quadIn, cubicOut, elasticOut, bounceOut, etc.
Usar las funciones integradas
Pásela a una transición o a un tween.
import { cubicOut } from "svelte/easing";
const p = tweened(0, { easing: cubicOut });Funciones personalizadas
Escriba la suya para adaptarla al diseño.
function easeInOutSine(t) { return -(Math.cos(Math.PI * t) - 1) / 2; }Curvas de Bézier
Convierta valores CSS cubic-bezier en funciones de JS para obtener un control preciso.
Cuándo usarlas
Adapte el easing a la acción: cubic-out para las entradas, cubic-in para las salidas y elastic-out para apariciones con rebote.
Composición
Combine varios easings para crear movimientos complejos (por ejemplo, un inicio rápido, un final lento y un rebote al terminar).
Visualizador de easing
Utilice herramientas en línea como easings.net para previsualizar las curvas antes de programarlas.
Accesibilidad
Evite los easings con un rebote excesivo para usuarios sensibles al movimiento.
Reutilización
Defina los easings personalizados en un módulo compartido para mantener una sensación uniforme en toda la aplicación.
Comprobación rápida
¿Cuál es el rango de entrada de la función de easing?
Resumen
El easing transforma el progreso lineal en una curva. Utilice las funciones integradas de svelte/easing o escriba funciones personalizadas.
Preguntas frecuentes
¿La lección «Funciones de easing personalizadas» es gratis?
Sí — el texto completo de «Funciones de easing personalizadas» 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 «Funciones de easing personalizadas»?
Escriba o importe funciones de easing para controlar el ritmo de las animaciones 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 3 de 4.
¿Cuánto tiempo toma la lección «Funciones de easing personalizadas»?
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