Easing en animación: ease in, ease out y curvas
El easing es la forma en que un valor animado acelera y desacelera entre keyframes, en lugar de moverse a una velocidad constante. Un ease hace que el movimiento comience suavemente, se detenga suavemente, o ambas cosas —como se mueven realmente los objetos con peso— y se establece mediante la curva de interpolación entre dos keyframes.
La respuesta corta
El easing controla la aceleración entre keyframes. El movimiento lineal se desplaza a velocidad constante y se detiene bruscamente; el movimiento con ease acelera desde un keyframe y desacelera hacia el siguiente. Dado que las herramientas no se ponen de acuerdo sobre lo que significa «ease in», lo más claro es decir inicio lento (aceleración) o final lento (desaceleración). Los handles Bézier en cada keyframe dan forma al ease con precisión, y un handle estirado más allá del valor del keyframe crea overshoot.
Por qué la velocidad constante se ve antinatural
Los objetos reales tienen masa. Un coche no alcanza la velocidad de crucero en el instante en que se mueve, y una puerta no se detiene en seco en el marco. El movimiento que comienza y se detiene a toda velocidad se percibe como mecánico, sin peso o generado por ordenador, incluso cuando la audiencia no puede decir por qué.
Los animadores de Disney llamaron a este principio slow in y slow out —uno de los doce principios de la animación expuestos en The Illusion of Life. Más dibujos cerca del inicio y el final de un movimiento y menos en el medio hacen que acelere y desacelere. En el software 3D, el mismo efecto proviene de la curva entre keyframes en lugar de dibujos adicionales.
Ease in y ease out significan cosas opuestas
Esta es la fuente más común de confusión, y no es culpa tuya. En CSS y en las funciones de easing de Robert Penner, ampliamente copiadas, ease-in significa que el movimiento comienza lentamente y acelera, y ease-out significa que comienza rápido y desacelera hasta detenerse. La curva pertenece a todo el movimiento entre dos keyframes.
En After Effects y muchas herramientas basadas en keyframes, el easing pertenece a un keyframe: easing into a keyframe significa desacelerar a medida que el movimiento llega a él, y easing out of a keyframe significa comenzar lentamente a medida que el movimiento lo abandona. Así, un ease in de After Effects en el último keyframe y un ease-out de CSS en el movimiento producen la misma desaceleración con nombres opuestos. Describir el movimiento —inicio lento, final lento, lento en ambos extremos— evita la ambigüedad.
Tipos de interpolación y handles Bézier
La interpolación lineal dibuja una línea recta entre keyframes: velocidad constante y un cambio abrupto en cada keyframe. La interpolación constante, stepped o hold mantiene el valor hasta el siguiente keyframe y luego salta, lo cual es útil para blocking, parpadeos y cualquier cosa que deba ser instantánea. La interpolación Bézier o spline dibuja una curva suave a través de los keyframes, y es donde reside el easing.
Un keyframe Bézier tiene dos handles, uno que controla la curva que llega al keyframe y otro que controla la que sale. Un handle plano significa velocidad cero en el keyframe —un ease. Un handle más largo mantiene esa lentitud durante más tiempo en el movimiento. Los handles alineados pasan suavemente por el keyframe; los handles separados crean un cambio brusco de dirección, como un rebote. Tira de un handle para que la curva sobrepase el valor del keyframe y el movimiento vaya más allá de su objetivo y se asiente.
Las familias de easing estándar
Las ecuaciones de easing de Penner, publicadas a principios de los 2000, se convirtieron en el vocabulario compartido para las curvas con nombre: sine, quad, cubic, quart, quint, expo y circ, cada una en forma in, out e in-out, yendo de apenas perceptible (sine) a violenta (expo). Back sobrepasa su objetivo antes de asentarse. La mayoría de las herramientas de motion y las librerías CSS incluyen alguna versión de este conjunto, normalmente aproximadas como curvas Bézier cúbicas.
Elastic y bounce son las excepciones. Oscilan varias veces dentro de un mismo movimiento, lo que una única Bézier cúbica no puede hacer, por lo que las herramientas las construyen a partir de varios keyframes o las generan de forma procedural.
Qué ease usar
Aplica ease en ambos extremos para la mayoría de los movimientos que comienzan y se detienen: un push de cámara, un objeto que se desliza a su lugar, un giro de cabeza. Usa un final lento para cosas que llegan y se asientan, y un inicio lento para cosas que se lanzan. Mantén lineal para movimientos que deben ser constantes —un ventilador girando, una cinta transportadora, el medio de un ciclo en bucle— y para keyframes por los que el movimiento debe pasar directamente. Usa hold para snaps, parpadeos y blocking.
Easing en Mixos Studio
Selecciona un keyframe y el encabezado de la línea de tiempo ofrece Linear, Ease in, Ease out, Ease y Hold. Siguen la convención basada en keyframes: Ease in ralentiza el movimiento que llega al keyframe, Ease out lo ralentiza al salir, y Ease hace ambas cosas —el Easy Ease de After Effects. Con la línea de tiempo enfocada, F9 aplica Ease, ⇧F9 Ease in y ⌘⇧F9 Ease out.
Curva… abre las familias de Penner desde Sine hasta Back, buscables tanto por sensación como por nombre, junto con cualquier curva que hayas guardado. El modo Curvas dibuja las pistas como curvas con handles Bézier que puedes arrastrar directamente, incluyendo el overshoot. Elastic y bounce no están deliberadamente en la lista de curvas; los generadores de spring y bounce en + Motion producen ese tipo de movimiento en su lugar.
Preguntas frecuentes
¿Qué significan ease in y ease out?
Ambos describen cambios graduales de velocidad, pero las herramientas los usan en sentidos opuestos. En CSS y las funciones de Penner, ease-in es un inicio lento y ease-out es un final lento. En After Effects y otras herramientas basadas en keys, el easing hacia un key ralentiza el movimiento al llegar, y el easing al salir de un key lo ralentiza al irse.
¿Cuál es la diferencia entre interpolación lineal y Bezier?
La interpolación lineal mueve un valor a velocidad constante y cambia abruptamente en cada key. La interpolación Bezier dibuja una curva suave a través de los keys, con handles que controlan cómo el movimiento acelera y desacelera, lo que hace posible el easing.
¿Qué es un hold key?
Un key con interpolación constante (stepped): el valor permanece exactamente donde está hasta el siguiente key, luego salta. Se usa para blocking, parpadeos, cortes y cualquier cosa que deba ser instantánea en lugar de gradual.
¿Cómo hago que una animación se sobrepase (overshoot)?
Añade un keyframe más allá del objetivo y otro de asentamiento después, o tira del handle Bézier para que la curva sobrepase el valor del keyframe y regrese. Una curva de easing de estilo back hace lo mismo que un preset.
¿Por qué mi animación parece robótica?
Normalmente porque es lineal: velocidad constante, con arranques y paradas bruscas en cada keyframe. Suavizar los arranques y paradas, y desplazar partes de un movimiento unos pocos frames para que no se muevan todas a la vez, soluciona la mayor parte.
Establece un key para un movimiento, luego prueba Linear, Ease y Back en los mismos dos keys —la diferencia es más fácil de ver que de describir.