Aguarde! Deixe eu me familiarizar com Animação primeiro.

Para começar a controlar o easing de um keyframe, selecione um keyframe e vá para o Painel de Easing na parte inferior do painel de propriedades.

O Painel de Easing apresenta uma representação visual da curva de animação junto com diversas opções para ajustá-la. Seu objetivo principal é gerenciar a suavidade da animação e controlar a interação entre keyframes consecutivos.

O menu de contexto de Easing abrange uma variedade de tipos de Easing. Editar manualmente a curva arrastando seus guidões fará com que o tipo de Easing mude para “Personalizado”.

Ao lado deste menu, uma seleção de formas de curvas pré-configuradas está disponível para aplicação rápida. A seleção inclui: Ease In, Ease Out, e Ease In Out. Essas curvas pré-definidas oferecem uma maneira simplificada de aprimorar nosso processo de edição. Cada tipo de Easing é explicado na seção a seguir.

A curva abaixo é definida por dois pontos, cujas coordenadas são mostradas aqui. O ponto conectado ao canto inferior esquerdo da curva (B) é mostrado primeiro, e o ponto conectado ao canto superior esquerdo (T) é o segundo.

Portanto, a série mostrada aqui pode ser dividida como as coordenadas B (0,5, 0), seguidas pelas coordenadas T (0,88, 0,77). Também pode ser mostrado em notação condensada: [Bx, By, Tx, Ty]. Esses pontos podem ser modificados diretamente ou atualizados automaticamente ajustando os pontos conectados no estilo do guidão mostrados abaixo.

Isso mostra uma representação abstrata da curva com dois pontos em estilo de guidão que podem ser movidos, conforme mencionado na parte de Bézier.

Afastar os pontos conectados de sua base fixa (tornando o guidão mais longo) tende a tornar o efeito de easing mais dramático, enquanto encurtar o guidão geralmente tem o efeito oposto - tornando-o mais sutil.

Essa é uma lista completa dos tipos de Easing predefinidos na Phase. Conforme mencionado anteriormente, o ajuste manual dos guidões resultará na mudança do tipo de Easing para "Personalizado".

No entanto, é importante observar que, apesar dessa personalização, o comportamento ainda pode estar alinhado com os tipos predefinidos apresentados abaixo.

Esta técnica de interpolação raramente usada retém o valor anterior até o próximo keyframe. Funciona bem para conseguir mudanças abruptas e dramáticas, sendo particularmente eficaz em cenários envolvendo transições de cores.

Este tipo de Easing garante um tempo consistente para o movimento do objeto, mantendo um ritmo uniforme entre os keyframes. Embora seja adequado para preservar o movimento uniforme, deve ser aplicado com cuidado em pontos de mudança, pois pode resultar em transições abruptas.

Oferece um início suave, começando lentamente antes de concluir com um final rápido e abrupto. Frequentemente combinado com 'Ease Out', este tipo de Easing se harmoniza com sua contraparte para criar transições suaves entre keyframes, especialmente quando um início suave é desejável.

Este tipo de Easing assegura um ritmo uniforme entre os keyframes e mantém um movimento consistente. Frequentemente combinado com 'Ease In', sua conclusão suave leva harmoniosamente ao próximo keyframe, criando transições suaves, especialmente quando combinada com o início suave da curva 'Ease In'.

Use esta curva para manter um ritmo uniforme entre os keyframes, facilitando mudanças suaves em ambos os lados das transições. É mais comumente usada para obter efeitos de animação suaves e equilibrados, sendo por isso uma escolha popular de Easing.

Este tipo de Easing progride em um ritmo uniforme entre os keyframes, apresentando um ajuste excessivo intencional em sua curva. Esta falha deliberada permite transições suaves e únicas, adicionando um toque de imprevisibilidade à animação.

Use Ease Out Back para manter um ritmo constante entre os keyframes com um ajuste excessivo intencional em sua curva. A imprecisão na conclusão melhora a suavidade das transições e dá um toque único à animação.

Esta curva transita rapidamente no meio, com ajustes excessivos tanto no início quanto no final. Apesar de seu potencial para comportamento errático, este tipo de Easing pode ser eficaz para introduzir um elemento de imprevisibilidade.

Como o nome sugere, os valores interpolados são calculados de acordo com as curvas de Bézier. Estas são definidas pelos pontos do keyframe selecionado e pelo keyframe imediatamente anterior.

Estas curvas são plotadas em uma grade, com o keyframe anterior definido como (0, 0) e o keyframe selecionado como (1, 1). Esses pontos são apenas para cálculos de backend e são imóveis, já que os valores reais podem ser drasticamente diferentes.

O que pode ser movido são os dois guidões saindo dos pontos fixos do keyframe. As extremidades desses guidões são pontos direcionais para curvar a curva.

A curva raramente tocará esses pontos, mas quanto mais distantes eles estiverem de (0, 0) e (1, 1), mais extrema será a curva. Em termos matemáticos, esses pontos estabelecem uma curva cúbica de Bézier, embora, se os pontos forem iguais, possa reduzir-se a uma curva quadrática ou até linear.

Os pontos direcionais (guidão) ficam travados em sua dimensão X entre 0 e 1. Entretanto, sua dimensão Y pode ser negativa ou exceder 1, causando saliências ou anomalias na animação. Todos os modos easing “Back” possuem esta característica. Embora os valores possam ser +/- 200.000 ou mais, valores elevados em qualquer direção têm impacto decrescente na curva geral.