Easing
El easing controla cómo cambia una propiedad animada a lo largo del tiempo. Determina si un movimiento mantiene la velocidad, acelera, desacelera o combina estos comportamientos.
El easing, o suavizado temporal, cambia el ritmo de una animación entre sus estados clave. Dos objetos pueden salir juntos, recorrer la misma distancia y llegar a la vez, pero transmitir sensaciones distintas porque su velocidad evoluciona de forma diferente.
No se limita a la posición: también puede aplicarse a escala, rotación y opacidad. La documentación de Adobe sobre easing describe cómo ajustar la velocidad de cambio dentro de una animación.
Los principales patrones de easing
- Lineal: cambios iguales en tiempos iguales. Útil cuando el movimiento debe mantener un ritmo constante.
- Ease-in: comienza despacio y acelera. Puede ayudar a que un elemento gane velocidad al salir del encuadre.
- Ease-out: comienza más rápido y desacelera al final. Puede hacer que una tarjeta o etiqueta llegue y se asiente donde debe leerse.
- Ease-in-out: comienza despacio, acelera y vuelve a desacelerar. Útil cuando se ven tanto el inicio como el final del movimiento.
Estos nombres describen patrones generales. Distintas curvas pueden compartir nombre y sentirse más suaves o bruscas. El ejemplo usa curvas sencillas para hacer visible la diferencia; no compara los ajustes predeterminados de distintos programas.
Cómo elegir easing para motion graphics
- Decide qué debe comunicar el movimiento. ¿El objeto entra, sale, se asienta o continúa a velocidad constante?
- Fija posiciones y duración. Mantén esos valores al comparar curvas para juzgar el cambio de velocidad.
- Revisa el movimiento completo. Un inicio lento puede retrasar información importante; un final demasiado prolongado puede hacer pesada una transición corta.
- Revisa los elementos vecinos. Una tarjeta seleccionada puede asentarse mientras las demás le hacen espacio. Los movimientos deben sentirse coordinados aunque usen curvas diferentes.
En iArt, describe el comportamiento en vez de pedir solo una animación «suave»: una entrada rápida seguida de una parada gradual, o un desplazamiento constante sin aceleración. Indica la duración. Para ver un caso con tarjetas coordinadas, consulta cómo crear una animación de carrusel 3D.
Easing, fotogramas clave, interpolación y resortes
Los fotogramas clave fijan estados importantes, como las posiciones inicial y final. La interpolación produce los estados intermedios; el easing determina cómo se progresa entre ellos. Un resorte modela una respuesta mediante propiedades como rigidez y amortiguación y puede sobrepasar el destino antes de asentarse. El easing no exige rebote y no todos los movimientos se benefician de él.
Relacionado: animación con JavaScript, tipografía cinética. Para ejemplos con texto, consulta cómo animar texto.