Usa el Visualizador de Curvas de Animación gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
El movimiento tiene ritmo, no solo velocidad
Dos animaciones pueden recorrer la misma distancia en el mismo tiempo y aun así sentirse completamente distintas. Una puede avanzar de golpe al principio y luego arrastrarse hasta detenerse. Otra puede avanzar despacio al principio y luego correr al final. La diferencia es la aceleración: la curva que relaciona el tiempo con el progreso. Una línea recta significa velocidad constante, lo que parece mecánico. Una línea curva significa que el movimiento acelera y frena, lo que parece natural, porque los objetos reales aceleran y frenan. La herramienta de arriba te permite dibujar esa curva y sentirla, con una pelota que se mueve exactamente siguiendo la curva.
Toda curva de aceleración en la web se puede escribir como una cúbica de Bézier con cuatro números. El primer y el tercer número controlan los tiradores horizontales, y el segundo y el cuarto controlan los tiradores verticales. La herramienta te da controles para los cuatro, además de ajustes predefinidos para las curvas estándar. El lienzo dibuja la curva desde abajo a la izquierda hasta arriba a la derecha, y la pelota de abajo la reproduce. Cuando cambias un control, tanto el dibujo como la pelota cambian a la vez, así que puedes conectar la forma de la curva con la sensación del movimiento.
Cómo usar el visualizador
Empieza con los ajustes predefinidos. Ease empieza rápido y termina con suavidad, ease-in empieza despacio y acelera, ease-out empieza rápido y frena, y ease-in-out hace ambas cosas: inicio lento, centro rápido y parada suave. Pulsa Reproducir animación después de cada ajuste y observa la pelota. Ease-in se siente como algo que despierta. Ease-out se siente como algo que se desliza hasta descansar. Ease-in-out se siente equilibrado y es el valor seguro para la mayoría de los movimientos de interfaz, como menús que entran o tarjetas que aparecen.
Luego mueve los controles por tu cuenta. Y1 da forma al inicio del movimiento e Y2 da forma al final. Un Y1 bajo, cerca de cero, significa un inicio lento. Un Y1 alto, cerca de uno, significa un inicio rápido. Un Y2 bajo significa que el movimiento termina despacio, y un Y2 alto significa que corre hasta el final. X1 y X2 desplazan los tiradores hacia los lados y ajustan con precisión dónde ocurren la aceleración y el frenado. Si empujas Y por encima de uno o por debajo de cero, la pelota sobrepasa su destino y vuelve, lo que se siente como un resorte. Ese sobrepaso conviene a elementos juguetones, como un botón que salta, pero queda mal para movimientos serios, como la aparición de una ventana.
Cómo leer la curva como una historia
Lee la curva de izquierda a derecha, donde la izquierda es el inicio de la animación y la derecha es el final. La altura es el progreso: cuánto se ha movido el elemento. Una sección empinada significa movimiento rápido, porque mucho progreso ocurre en poco tiempo. Una sección plana significa movimiento lento, porque poco progreso ocurre. Una curva empinada al inicio y plana al final empieza rápido y frena con suavidad. Una curva plana al inicio y empinada al final avanza despacio y luego corre.
Accesibilidad y sensibilidad al movimiento
Algunas personas sienten mareo o incomodidad con la animación. Respeta el ajuste prefers-reduced-motion en tu CSS y desactiva el movimiento no esencial para los usuarios que lo piden. La aceleración no corrige una animación dañina; solo le da forma. Si una animación mueve una zona grande, parpadea o se repite sin fin, considera eliminarla por completo para los usuarios con movimiento reducido. Además, evita usar el movimiento como única señal: acompaña un resaltado en movimiento con un cambio de color o de texto, para que el significado sobreviva cuando el movimiento está desactivado.
Mantén bajo el número de elementos animados. Una tarjeta en movimiento atrae la mirada de forma útil. Cinco tarjetas en movimiento a la vez crean ruido, y el usuario no puede saber cuál importa. Lo mismo se aplica al sobrepaso y al rebote: un elemento juguetón encanta, una página llena de elementos que rebotan agota. El visualizador también ayuda aquí, porque te permite probar una curva de forma aislada antes de aplicarla a todo un diseño.
Preguntas frecuentes
¿Qué significan los cuatro números de la cúbica de Bézier? Son los dos puntos de control de la curva. El primer par da forma a la parte inicial del movimiento y el segundo par da forma a la parte final. La herramienta dibuja la curva, así que no necesitas calcular nada a mano.
¿Por qué mi curva supera la línea superior? Eso significa que un valor de Y está por encima de uno, así que la animación sobrepasa su destino y vuelve. Es un efecto deliberado, no un error, y se siente como un resorte.
¿Puedo copiar la curva en mi CSS? Sí. El cuadro de código muestra transition-timing-function con tus números exactos, además de una regla de ejemplo. Pégala en tu hoja de estilos y cambia la propiedad y la duración según tu elemento.
Dale forma a una curva arriba, reprodúcela con la pelota y copia los números que se sientan bien. Un buen ritmo es invisible cuando funciona, y ese es exactamente el objetivo.
Herramientas relacionadas
- Easing Curve Visualizer (English version)
- Generador de Animaciones por Fotogramas
- Creador de Animaciones de Carga