Animação e Engenharia de Movimento

Engenharia de Animação & Craft de Movimento

Esta skill capacita o agente com práticas padrão da indústria, padrões prontos para produção e modelos matemáticos/físicos para projetar e codificar animações fluidas e performáticas em interfaces web e de aplicativos.

---

1. Regras de Ouro do Desempenho de Movimento

1. Anime APENAS Propriedades Compostas:
   • Sempre prefira transform (translate3d, scale, rotate) e opacity.
   • NUNCA anime propriedades geométricas (width, height, top, left, margin, padding) a menos que use a técnica FLIP (First, Last, Invert, Play). Animar geometria dispara recálculos de layout caros (Reflow) e Paint na CPU.
2. Promova para GPU de Forma Responsável:
   • Use will-change: transform, opacity; apenas em elementos ativamente animados e remova-o após a animação terminar se a memória for limitada.
   • Force a composição de camadas GPU com transform: translateZ(0) ou backface-visibility: hidden quando necessário.
3. Respeite a Acessibilidade do Usuário:
   • Sempre suporte @media (prefers-reduced-motion: reduce):

     @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
       }
     }
     

4. Temporização Natural e Durações:
   • Microinterações (pressionar botão, alternar, dica de ferramenta): 100ms - 200ms
   • Transições padrão (menus suspensos, diálogos, gavetas, cartões): 200ms - 350ms
   • Transições de cena complexas / transições de página: 350ms - 500ms
   • Animações com mais de 500ms parecem lentas, a menos que sejam loops contínuos de fundo atmosférico ou narrativa de histórias.

---

2. Matriz de Seleção de Tecnologia

Cenário / Necessidade	Ferramenta Recomendada	Por quê?
Estados simples de hover, focus, active, fade/slide	Transições CSS & @keyframes ou Tailwind CSS	Zero overhead de JavaScript, aceleração de hardware a 120 FPS.
UI React / Next.js, Modais, Transições de Layout Compartilhado	Framer Motion (motion)	API declarativa, física de mola, FLIP automático (layoutId), AnimatePresence.
Linhas do Tempo Complexas, Morphing SVG, UI Acionada por Scroll	GSAP (GreenSock) + ScrollTrigger	Controle de coreografia incomparável, scrub preciso, consistência entre navegadores.
Experiências 3D, Redes de Partículas, Shaders	Three.js / React Three Fiber / Canvas 2D	Renderização GPU direta via WebGL para centenas de milhares de partículas.
Gráficos Vetoriais em Movimento e Ilustrações de Personagens	Lottie / dotLottie / Rive	Payloads pequenos em JSON/binário, fidelidade vetorial escalável, máquinas de estado interativas.

---

3. Curvas de Movimento (Tokens de Easing)

Nunca use linear para movimento de UI, a menos que esteja simulando uma esteira de velocidade constante ou um loader giratório infinito. O movimento natural acelera e desacelera:

• Entrada Rápida (pop/abertura padrão de UI): cubic-bezier(0.16, 1, 0.3, 1) (Expo Out - burst inicial rápido, desaceleração suave)
• Saída Suave (fechar/dismiss): cubic-bezier(0.7, 0, 0.84, 0) (Expo In - acelera para fora da tela)
• Dinâmico Natural / Enfatizado: cubic-bezier(0.34, 1.56, 0.64, 1) (Pequeno overshoot com bounce)
• Física de Mola (Preferida para toque e arrasto) :
  • Rigidez: 300 - 400
  • Amortecimento: 25 - 35
  • Massa: 0.8 - 1.0

---

4. Guias Detalhados e Referências

Para padrões de código abrangentes e guias detalhados, consulte as referências:

• Referência de Animações CSS & Tailwind
• Padrões de Framer Motion & Motion One
• Domínio de GSAP & ScrollTrigger
• Movimento com Three.js & Canvas
• Princípios de Movimento de UI e Acessibilidade

---

5. Lista de Verificação

Ao construir componentes animados:

• As animações são suaves (60-120 FPS) sem gagueira ou quedas de quadros?
• Mudanças de layout (CLS) são evitadas durante a animação?
• As animações de saída são aguardadas corretamente antes da desmontagem do elemento?
• A UI lida com cliques/toques rápidos sem falhas (animações interrompíveis)?
• A implementação de prefers-reduced-motion foi realizada?