Animação

O movimento nas interfaces não é decoração. É comunicação. Bem feita, a animação responde a perguntas que o utilizador estava prestes a fazer: de onde veio aquele elemento, para onde vai e o que acabou de acontecer?

O Propósito do Movimento

Cada animação numa interface deve servir uma das seguintes funções: orientar (explicar relações espaciais), informar (comunicar o resultado de uma ação), guiar (direcionar a atenção para o que importa) ou encantar (recompensar a interação de forma natural). Movimento sem propósito adiciona ruído, não clareza.

Princípios que Funcionam

Uma boa animação de interface partilha algumas propriedades. É rápida — tipicamente 200–400ms para transições, mais curta para feedback. Segue a física natural — acelerando e desacelerando em vez de se mover a velocidade constante. E respeita as preferências do utilizador — a media query prefers-reduced-motion existe para utilizadores com distúrbios vestibulares e deve sempre ser respeitada.

"A animação deve parecer física, não performance. O melhor movimento passa despercebido."

As Animações de Saída Importam

As entradas são óbvias. As saídas são onde a maioria das animações falha. Um elemento que desaparece sem animação parece um erro. Um elemento que sai suavemente completa o ciclo de interação e deixa o utilizador com um modelo mental claro do que acabou de mudar.

Considerações de Performance

As animações devem correr na GPU, não na CPU. Isso significa limitar-se a transform e opacity — propriedades que podem ser compostas sem acionar o recálculo do layout. Animar width, height ou top/left causa repinturas em cada frame e deve ser evitado.

Conclusão

O motion design para a web é uma arte. O objetivo não é fazer as coisas mover — é fazer as interações parecerem coerentes, intuitivas e vivas.