Como projetar animações

Animação é um gráfico

• Para projetar, é preciso conseguir reproduzir e combinar.
• Toda animação é uma mudança de valor de acordo com alguma entrada (tempo, rolagem, posição do mouse etc.), e essa mudança pode ser desenhada como um gráfico.
• O formato do gráfico determina a sensação do movimento, e a matemática é a ferramenta que permite criar essa curva do jeito que você quiser.

Ferramentas matemáticas

• Curva de Bézier (easing): expressão de aceleração e desaceleração com início e fim definidos. Funciona com o princípio de que dois pontos de controle puxam a curva como ímãs. É criada pela aplicação recursiva de interpolação linear. Mesmo com o mesmo movimento, a impressão transmitida muda completamente dependendo de ease-in ou ease-out
• Aproximação exponencial: com uma única linha, value += (target - value) * factor, acompanha o alvo de forma suave. Continua natural mesmo quando o alvo muda a cada frame. Pode ser usada para seguir o cursor, contadores, barras de progresso etc.
• Mola: oscilação amortecida baseada em duas forças, restauração e amortecimento. A sensação é definida por dois valores, stiffness e damping. Diferente do easing, não há duration; quando o alvo muda, a transição acontece de forma natural mantendo a velocidade atual
• Simulação física: combina leis físicas como gravidade, colisão e atrito. O ponto central é que, “se você definir apenas as regras, o movimento se cria sozinho”. Em vez de projetar individualmente as trajetórias de dezenas de objetos, como no caso de confetes, basta configurar gravidade e resistência do ar. Porém, como a previsibilidade é menor, é mais adequada para efeitos auxiliares do que para transições centrais da UI
• atan2: função para obter a direção entre dois pontos. Pode ser usada quando um elemento olha na direção do deslocamento ou em efeitos de inclinação 3D em que um card se inclina na direção do cursor
• Funções trigonométricas: ideais para repetições periódicas. Ao aplicar diferenças de fase entre vários elementos, cria-se um efeito de onda. Ex.: indicador de digitação, fundo flutuante
• Onda dente de serra: ao contrário do vai e volta suave de sin, avança de 0→1 e então reinicia imediatamente, em uma repetição unidirecional. Útil para pulse ring, ping e progresso repetitivo

Projetando animações complexas

• Funções por trecho: divide uma curva complexa em intervalos e projeta cada pedaço separadamente antes de juntá-los. Permite um ajuste intencional mais fino do que simulação física (ex.: reduzir intencionalmente a altura de um bounce)
• Mapear dependências: o ponto de partida do projeto de animação é “de que o valor depende?”. Pode ser classificado em três tipos: baseado em tempo (o mais comum), baseado em valor (rolagem, posição do mouse) e baseado em evento (acionado por clique, hover)
• Pipelining: posiciona os blocos em sequência sobre o eixo do tempo. Combina estratégias de arranjo como sequência, sobreposição, simultaneidade e stagger. Cada bloco pode ser ajustado de forma independente
• Transição de estado: método em que a próxima etapa é acionada por condição, não pelo tempo. Se você explicitar as condições de transição, como lançamento → explosão → dispersão → desaparecimento de um fogo de artifício, isso pode ser gerenciado com uma máquina de estados
• Separação de propriedades: separa várias propriedades (tamanho, cor, opacidade etc.) em trilhas independentes. Como cada trilha não precisa conhecer as outras, fica mais fácil fazer ajustes finos ou adicionar novas

Pontos a considerar

• Aleatoriedade: deve-se usar aleatoriedade controlada, não algo totalmente aleatório. O ponto-chave é definir a fronteira entre “o que controlar até onde” e “a partir de onde deixar aleatório”
• Bidirecionalidade: quando a direção muda no meio da aparição, é preciso projetar para que a reversão continue a partir do estado atual, evitando saltos ou estranheza

Limites e pontos fortes da animação em código

• Animações complexas, como movimentos de personagem ou morphing sofisticado, são mais adequadas a ferramentas especializadas como Lottie e Rive, ou a vídeo.
• Por outro lado, o ponto forte da animação em código está em interações em tempo real que respondem imediatamente à entrada do usuário.