Como projetar animações naturais com gráficos, easing e física

Animação como gráfico

A proposta central é tratar toda animação como um gráfico: uma variável muda de acordo com uma entrada, que pode ser tempo, rolagem, posição do cursor, dados de sensores ou um evento. O eixo vertical representa o valor animado - como opacidade, posição ou escala - e o eixo horizontal representa aquilo de que esse valor depende. A forma da curva, mesmo entre os mesmos pontos inicial e final, determina a sensação do movimento. Essa representação torna possível reproduzir, analisar e combinar movimentos de maneira sistemática.

Ferramentas matemáticas para o movimento

O movimento linear mantém velocidade constante, mas as animações que parecem naturais geralmente precisam de aceleração e desaceleração. Funções de easing ajustam o progresso entre 0 e 1: ease-in começa devagar e termina rápido, enquanto ease-out faz o contrário. As curvas cúbicas de Bézier permitem controlar esse formato por meio de dois pontos de controle, cuja influência “puxa” a curva sem que ela necessariamente passe por eles. Assim, a escolha depende da finalidade: uma entrada rápida pode chamar atenção, enquanto uma saída veloz pode fazer algo desaparecer discretamente.

Quando o alvo muda continuamente, como no acompanhamento do cursor, a aproximação exponencial é mais adequada que uma curva com duração fixa. A cada quadro, o valor avança uma fração proporcional à distância até o alvo; com isso, move-se rapidamente no início e desacelera ao se aproximar. O fator define a velocidade de convergência, e o método também permite mudar de direção suavemente quando o alvo se desloca.

A animação com mola acrescenta inércia e ultrapassagem do alvo. Baseada em oscilação harmônica amortecida, combina uma força restauradora, determinada pela rigidez, com uma força de amortecimento proporcional à velocidade. Mais rigidez deixa a resposta rápida; menos amortecimento prolonga a oscilação. Diferentemente do easing, a mola não tem duração fixa: continua até convergir e preserva a velocidade atual quando o alvo muda.

Simulações físicas ampliam essa lógica para gravidade, colisões, atrito, inércia e interação entre objetos. A cada quadro, calculam-se as forças, integra-se a aceleração para atualizar velocidade e posição, e aplicam-se restrições, como limites e colisões. O método é útil para muitos objetos, como partículas de confete, ou para efeitos interativos, mas é menos previsível que uma animação baseada em easing e, por isso, pode ser inadequado para transições centrais de uma interface.

Direção, repetição e composição

A função atan2 calcula a direção entre dois pontos e pode orientar elementos que seguem seu movimento, além de produzir inclinações de cartões e efeitos direcionais. Para movimentos periódicos, sin e cos controlam amplitude, frequência e fase; fases diferentes entre elementos criam ondas, indicadores de digitação e equalizadores coreografados. Já a onda dente de serra cresce de 0 a 1 e retorna imediatamente ao início, servindo a pulsos, sinais e indicadores repetitivos de progresso.

Animações complexas devem ser decompostas em segmentos, cada um com uma curva simples. Esses segmentos podem ser organizados em sequência, sobrepostos, iniciados simultaneamente ou escalonados entre elementos. Outra opção é estruturá-los como transições de estado, avançando quando uma condição é satisfeita - por exemplo, uma partícula passa de lançamento a explosão quando sua velocidade chega a zero.

Também é útil separar propriedades em trilhas independentes, como borda, escala e detalhes de um cartão selecionado. A aleatoriedade deve ser controlada, com pequenas variações de velocidade, ângulo ou tempo, para evitar tanto a rigidez mecânica quanto resultados imprevisíveis. Em interações reversíveis, a animação precisa retomar do estado atual; caso contrário, surgem saltos. Em geral, a mesma curva não deve ser usada de forma idêntica para entrada e saída.

Para personagens, metamorfoses desenhadas à mão ou composições com muitas camadas interdependentes, ferramentas dedicadas, como After Effects com Lottie, Rive ou vídeo, podem ser mais apropriadas. O código, por sua vez, é especialmente forte em movimentos que respondem em tempo real à entrada do usuário e às mudanças de estado. O princípio geral é decompor o movimento em partes representáveis por gráficos, aproximando a intenção visual de uma implementação controlável.