Easing na animação: ease in, ease out e curvas
Easing é como um valor animado acelera e desacelera entre keyframes, em vez de se mover a uma taxa constante. Um ease faz o movimento começar suavemente, parar suavemente, ou ambos — da mesma forma que objetos com peso se movem na realidade — e é definido pela curva de interpolação entre dois keyframes.
A resposta breve
Easing controla a aceleração entre keyframes. O movimento linear se move em velocidade constante e para abruptamente; o movimento com ease acelera de um keyframe e desacelera para o próximo. Como as ferramentas discordam sobre o que “ease in” significa, é mais claro dizer início lento (aceleração) ou final lento (desaceleração). As alças bezier em cada keyframe moldam o ease exatamente, e uma alça puxada além do valor do keyframe cria overshoot.
Por que a velocidade constante parece errada
Objetos reais possuem massa. Um carro não atinge a velocidade de cruzeiro no instante em que se move, e uma porta não para abruptamente no batente. O movimento que começa e para em velocidade máxima parece mecânico, sem peso ou gerado por computador, mesmo que o público não consiga dizer o porquê.
Os animadores da Disney nomearam este princípio de slow in e slow out — um dos doze princípios da animação apresentados em The Illusion of Life. Mais desenhos perto do início e fim de um movimento e menos no meio fazem-no acelerar e desacelerar. Em softwares 3D, o mesmo efeito vem da curva entre os keyframes, em vez de desenhos adicionais.
Ease in e ease out significam coisas opostas
Esta é a fonte mais comum de confusão, e não é sua culpa. Em CSS e nas funções de easing de Robert Penner, amplamente copiadas, ease-in significa que o movimento começa lentamente e acelera, e ease-out significa que começa rápido e desacelera até parar. A curva pertence a todo o movimento entre dois keyframes.
No After Effects e em muitas ferramentas baseadas em keyframes, o easing pertence a um keyframe: easing into a key significa desacelerar à medida que o movimento chega a ele, e easing out of a key significa começar lentamente à medida que o movimento o deixa. Assim, um ease in do After Effects no último keyframe e um ease-out do CSS no movimento produzem a mesma desaceleração sob nomes opostos. Descrever o movimento — início lento, fim lento, lento em ambas as extremidades — evita a ambiguidade.
Tipos de interpolação e alças bezier
A interpolação linear traça uma linha reta entre os keyframes: velocidade constante e uma mudança abrupta em cada keyframe. A interpolação constante, escalonada ou hold mantém o valor até o próximo keyframe e depois salta, o que é útil para blocking, blinks e qualquer coisa que deva ser instantânea. A interpolação bezier ou spline traça uma curva suave através dos keyframes, e é onde o easing reside.
Um keyframe bezier tem duas alças, uma controlando a curva que chega ao keyframe e outra controlando a que sai. Uma alça plana significa velocidade zero no keyframe — um ease. Uma alça mais longa mantém essa lentidão por mais tempo no movimento. Alças alinhadas passam pelo keyframe suavemente; alças separadas criam uma mudança brusca de direção, como um bounce. Puxe uma alça para que a curva ultrapasse o valor do keyframe e o movimento passe do seu alvo e retorne.
As famílias de easing padrão
As equações de easing de Penner, publicadas no início dos anos 2000, tornaram-se o vocabulário compartilhado para curvas nomeadas: sine, quad, cubic, quart, quint, expo e circ, cada uma nas formas in, out e in-out, variando de quase imperceptível (sine) a violenta (expo). Back ultrapassa seu alvo antes de se estabilizar. A maioria das ferramentas de motion e bibliotecas CSS incluem alguma versão do conjunto, geralmente aproximadas como curvas bezier cúbicas.
Elastic e bounce são as exceções. Elas oscilam várias vezes dentro de um único movimento, o que uma única bezier cúbica não consegue fazer, então as ferramentas as constroem a partir de vários keyframes ou as geram proceduralmente.
Qual ease usar
Use ease em ambas as extremidades para a maioria dos movimentos que começam e param: um push de câmera, um objeto deslizando para o lugar, um giro de cabeça. Use um final lento para coisas que chegam e se estabilizam, e um início lento para coisas que são lançadas. Mantenha linear para movimentos que devem ser constantes — um ventilador girando, uma esteira, o meio de um ciclo em loop — e para keyframes pelos quais o movimento deve passar diretamente. Use hold para snaps, blinks e blocking.
Easing no Mixos Studio
Selecione um keyframe e o cabeçalho da timeline oferece Linear, Ease in, Ease out, Ease e Hold. Eles seguem a convenção baseada em keyframes: Ease in desacelera o movimento que chega ao keyframe, Ease out desacelera o que sai, e Ease faz ambos — o Easy Ease do After Effects. Com a timeline focada, F9 aplica Ease, ⇧F9 Ease in e ⌘⇧F9 Ease out.
Curva… abre as famílias de Penner de Sine a Back, pesquisáveis por sensação e nome, junto com quaisquer curvas que você tenha salvo. O modo Curvas desenha os tracks como curvas com alças bezier que você arrasta diretamente, incluindo overshoot. Elastic e bounce não estão deliberadamente na lista de curvas; os geradores de spring e bounce em + Motion produzem esse tipo de movimento.
Perguntas frequentes
O que significam ease in e ease out?
Ambos descrevem mudanças graduais de velocidade, mas as ferramentas os usam em sentidos opostos. Em CSS e nas funções de Penner, ease-in é um início lento e ease-out é um final lento. No After Effects e outras ferramentas baseadas em key, fazer easing em um key desacelera o movimento ao chegar, e fazer easing para fora de um key o desacelera ao sair.
Qual a diferença entre interpolação linear e Bezier?
A interpolação linear move um valor em velocidade constante e muda abruptamente em cada key. A interpolação Bezier desenha uma curva suave através dos keys, com handles que controlam como o movimento acelera e desacelera, o que torna o easing possível.
O que é um hold key?
Um key com interpolação constante (stepped): o valor permanece exatamente onde está até o próximo key, então salta. É usado para blocking, blinks, cuts e qualquer coisa que deva “saltar” em vez de se mover gradualmente.
Como faço para uma animação ter overshoot?
Adicione um keyframe além do alvo e um keyframe de assentamento depois, ou puxe a alça bezier para que a curva vá além do valor do keyframe e retorne. Uma curva de easing estilo “back” faz o mesmo que um preset.
Por que minha animação parece robótica?
Geralmente porque é linear: velocidade constante, com inícios e paradas abruptas em cada keyframe. Suavizar os inícios e paradas, e deslocar partes de um movimento por alguns frames para que não se movam todos de uma vez, resolve a maior parte do problema.
Defina um key, depois experimente Linear, Ease e Back nos mesmos dois keys — a diferença é mais fácil de ver do que de descrever.