Easing
Easing controla como uma propriedade animada muda ao longo do tempo. Ele determina se um movimento mantém velocidade constante, acelera, desacelera ou combina esses comportamentos.
O easing, ou suavização temporal, altera o ritmo de uma animação entre seus estados principais. Dois objetos podem partir juntos, percorrer a mesma distância e chegar juntos, mas transmitir sensações diferentes porque a velocidade muda de maneiras distintas.
Ele não se limita à posição: escala, rotação e opacidade também podem variar com easing. A documentação da Adobe sobre easing explica seu uso para ajustar a taxa de mudança durante a animação.
Os principais padrões de easing
- Linear: mudanças iguais em tempos iguais. Útil quando o movimento deve manter um ritmo constante.
- Ease-in: começa devagar e acelera. Pode ajudar um elemento a ganhar velocidade ao sair do quadro.
- Ease-out: começa mais rápido e desacelera no final. Pode ajudar um cartão ou rótulo a chegar e se acomodar onde precisa ser lido.
- Ease-in-out: começa devagar, acelera e desacelera novamente. Útil quando o início e o fim do movimento estão visíveis.
Esses nomes descrevem padrões gerais. Curvas diferentes podem ter o mesmo nome e parecer mais suaves ou mais bruscas. O exemplo usa curvas simples para tornar a diferença visível; não compara configurações padrão de programas.
Como escolher easing para motion graphics
- Decida o que o movimento deve comunicar. O objeto está entrando, saindo, se acomodando ou seguindo em velocidade constante?
- Defina posições e duração. Mantenha esses valores ao comparar curvas para avaliar a mudança de velocidade.
- Confira o movimento inteiro. Um início lento pode atrasar uma informação importante; uma desaceleração longa pode deixar uma transição curta arrastada.
- Observe os elementos vizinhos. Um cartão selecionado pode se acomodar enquanto os demais abrem espaço. Os movimentos devem parecer coordenados, mesmo usando curvas diferentes.
No iArt, descreva o comportamento em vez de pedir apenas uma animação “suave”: uma entrada rápida seguida de uma parada gradual, ou um deslocamento constante sem aceleração. Especifique a duração. Para um exemplo com cartões coordenados, veja como criar uma animação de carrossel 3D.
Easing, quadros-chave, interpolação e molas
Os quadros-chave definem estados importantes, como as posições inicial e final. A interpolação produz os estados intermediários; o easing determina a progressão entre eles. Uma mola modela uma resposta com propriedades como rigidez e amortecimento e pode ultrapassar o destino antes de se acomodar. Easing não exige um efeito de rebote, e nem todo movimento se beneficia dele.
Relacionados: animação com JavaScript, tipografia cinética. Para exemplos com texto, veja como animar texto.