Easing: encontre o ritmo do movimento

Dois elementos podem percorrer a mesma distância no mesmo tempo e ainda parecer diferentes. O easing define como a velocidade varia ao longo desse intervalo.

Cinco curvas para começar

• linear: velocidade constante; útil para uma rotação contínua.
• ease: começa devagar, acelera e desacelera no final.
• ease-in: ganha velocidade ao longo do movimento.
• ease-out: chega rapidamente e desacelera perto do destino.
• ease-in-out: entrada e saída suaves; útil para pulsação.

Experimente no editor

Abra Geometria, selecione o círculo e aplique Pulse. Compare linear e ease-in-out mantendo a duração em 1.600 ms. Use a timeline em 25%, 50% e 75% do ciclo para observar a diferença.

Offsets e ritmo

Em Pulse, o estado de maior escala fica no offset de 50%. Em Bounce, há vários pontos intermediários. O easing é aplicado aos segmentos entre esses pontos, e não substitui seus valores. Mudar os valores muda o caminho; mudar a curva muda a velocidade dentro de cada segmento.

Escolha um ritmo que ajude

Movimentos devem apoiar a compreensão. Um efeito muito rápido pode desaparecer; um muito lento pode atrasar a interação. Evite depender de animação para comunicar informações essenciais e mantenha o desenho estático legível.

Compare as curvas

A reprodução só começa ao clicar. Você pode interromper a demonstração a qualquer momento.