animation-principles

Princípios de Movimento

Decida como algo deve se mover para que pareça correto — independentemente da ferramenta usada para construí-lo. Este skill responde sobre timing, easing, espaçamento, peso e ritmo. Ele não escolhe uma stack tecnológica; ele produz números concretos (durações, curvas cubic-bezier, offsets de stagger, configurações de mola) prontos para serem entregues a qualquer implementação.

Quando usar

• O movimento parece rígido, flutuante, mecânico, robótico ou barato e precisa de diagnóstico.
• Escolher a duração, a curva de easing e o offset de stagger de um clipe ou transição.
• Revisar se o movimento respeita a intuição física (peso, acompanhamento, arcos).
• Sincronizar keyframes com uma batida musical ou acento de edição.

Três pilares — resolva estes antes de qualquer número

Cada peça de movimento deve responder a três perguntas antes de você escolher uma duração ou curva. Pule-as e você obtém movimento tecnicamente correto que não parece nada. Este é o vocabulário compartilhado ao qual o restante da coleção se refere.

Pilar	A pergunta	O que impulsiona
Intenção emocional	O que o espectador deve sentir? (alegria, calma, urgência, confiança, elegância)	Easing, duração, amplitude/overshoot
Narrativa visual	Qual é a micro-história? Configuração → ação → resolução	Sequenciamento, encenação, o que entra quando
Artesanato de movimento	Como torná-lo crível?	Física, movimento secundário, arcos, acompanhamento

Três camadas de movimento — profundidade, não planura

Movimento plano = apenas a coisa principal se move. Movimento crível executa três camadas ao mesmo tempo:

• Primária — a ação principal que o olho segue (o movimento herói).
• Secundária — riqueza de suporte que reage à primária (uma sombra se deslocando, um ícone cutucando, um rótulo se estabilizando mais tarde).
• Ambiente — vida de fundo que nunca exige atenção (deriva lenta de gradiente, um pulso de baixo contraste).

A camada de julgamento (motion-art-direction) chama estas de Herói / Suporte / Textura — as mesmas três camadas, classificadas por o que merece movimento. Primária≈Herói, Secundária≈Suporte, Ambiente≈Textura.

Princípios centrais

Easing é a maior alavanca

Movimento linear parece robótico. Reserve linear para loops contínuos (spinners, marquees, scroll infinito) apenas. Tudo que o olho percebe como um evento discreto precisa de aceleração.

Combine a curva com a ação:

• Entrar / aparecer -> ease-out (início rápido, leve pouso). O objeto chega com energia e desacelera até parar. cubic-bezier(0.16, 1, 0.3, 1).
• Sair / desaparecer -> ease-in (início leve, fim rápido). O objeto acelera para fora. cubic-bezier(0.7, 0, 0.84, 0).
• Mover / reposicionar (permanece na tela) -> ease-in-out (simétrico). cubic-bezier(0.65, 0, 0.35, 1).
• Brinquilíneo / com marca -> pequeno overshoot. cubic-bezier(0.34, 1.56, 0.64, 1) (o 1.56 ultrapassa 1.0, criando um overshoot-e-pouso que parece 'pesado').

Regra prática: o olho perdoa um início lento muito menos que um final lento. Em dúvida, desacelere até o repouso.

Modelagem manual de easing (After Effects). Ao animar keyframes manualmente em vez de fornecer uma curva, os mesmos princípios se aplicam ao Graph Editor: molde o Gráfico de Velocidade para que as extremidades se aproximem de zero e aumente a influência da desaceleração para 80–90% para um lançamento rápido e um pouso suave. F9 (Easy Ease) é apenas um ponto de partida simétrico de 33% — torne-o assimétrico. Consulte references/easing-graph-editor.md para leitura do Graph Editor, técnicas de alça/influência e receitas passo a passo de overshoot, antecipação e bounce (incluindo uma expressão de bounce decrescente).

Timing comunica peso e importância

Elemento	Duração
Micro-interação (hover, alternar, feedback de toque)	100-200ms
Transição de UI (painel, modal, região de página)	200-400ms
Herói / elemento grande / tela cheia	400-800ms
Movimento de câmera cinematográfico	800-2000ms

Distância e tamanho escalam a duração. Um pequeno ícone se movendo 20px e um painel de tela cheia se movendo 800px NÃO devem compartilhar a mesma duração — o painel precisa de mais tempo ou parece sem peso. Uma escala prática: mantenha a velocidade percebida aproximadamente constante adicionando ~30-50% de duração quando a distância ou área dobra aproximadamente. Objetos pesados começam devagar e têm menos overshoot; objetos leves estalam e podem quicar.

Espaçamento e stagger criam ritmo

Nunca revele uma lista, grade ou grupo de uma só vez — isso parece um único evento plano. Escalone o início de cada filho.

• Listas / itens sequenciais: 40-80ms entre itens.
• Grades densas: 20-40ms (mais itens, menos atraso por item, ou o final se arrasta).
• Limite a revelação total em aproximadamente 600-800ms para um grupo; se count * offset exceder isso, reduza o offset ou mude para um stagger baseado em distância (itens mais distantes de um ponto de origem começam mais tarde).
• A direção do stagger deve seguir o olho: de cima para baixo, ou irradiando de um ponto focal.

A Regra 1/3 (duas formas, ambas universais):

• Distância — nenhum elemento viaja mais do que ~1/3 da tela sem um keyframe intermediário ou uma mudança de escala/opacidade. Deslizamentos longos e contínuos são lidos como 'o template se moveu', não 'algo aconteceu.'
• Simultaneidade — com 3+ elementos, mantenha no máximo ~1/3 em movimento ativo ao mesmo tempo. O resto segura ou se move como ambiente. Tudo se movendo junto = ruído sem ponto focal.

Antecipação e acompanhamento vendem movimento físico

• Antecipação: um pequeno contra-movimento antes da ação principal (um botão abaixa scale 0.95 antes de estourar, um personagem agacha antes de pular). 60-120ms são suficientes.
• Acompanhamento / ação sobreposta: partes de arrasto continuam se movendo depois que o corpo principal para (um cartão herói pousa, então sua sombra e rótulo se acomodam 40-80ms depois). Escalone o pouso de elementos anexados em vez de parar tudo no mesmo quadro.
• Arcos: curvas de movimento naturais; translação em linha reta pura de um objeto orgânico parece mecânica. Adicione um leve arco ao x/y ou anime um caminho.

Sincronização com batida e ritmo

Quando o movimento acompanha áudio, coloque keyframes de impacto (um golpe, um corte, uma revelação) na batida, não entre batidas. A 120 BPM, uma batida é 500ms; uma grade de colcheia é 250ms. Quantize momentos-chave para essa grade. Para edições sem música, estabeleça um pulso visual (por exemplo, um evento principal a cada ~500-800ms) para que a peça respire de forma consistente.

Movimento baseado em mola versus baseado em duração

Molares (massa / rigidez / amortecimento) autodeterminam a duração e parecem mais físicos para movimento interativo e interrompível (arrastar e soltar, gestos). Duração+easing é melhor para sequências coreografadas e bloqueadas no tempo (vídeo, revelações ligadas ao scroll) onde a sincronização exata importa. Uma mola padrão rápida: stiffness 300, damping 30, mass 1. Consulte references/easing-curves.md para uma tabela completa de molas.

Diagnosticando falhas comuns

• Parece rígido/robótico -> usando linear ou easing simétrico em uma entrada; mude para ease-out.
• Parece flutuante/lento -> duração muito longa ou ease-out muito suave; corte a duração em 30%, afie a curva.
• Parece barato/mal feito -> tudo aparece ao mesmo tempo (sem stagger), ou todos os elementos compartilham uma duração independentemente do tamanho.
• Parece mecânico apesar do easing -> sem antecipação, sem acompanhamento, caminhos em linha reta; adicione arcos e sobreposição.

Referência rápida

Necessidade	Use
Entrar	cubic-bezier(0.16, 1, 0.3, 1), 300-500ms
Sair	cubic-bezier(0.7, 0, 0.84, 0), 200-300ms
Mover	cubic-bezier(0.65, 0, 0.35, 1), 300-400ms
Pop com marca	cubic-bezier(0.34, 1.56, 0.64, 1), 400-600ms
Stagger de lista	40-80ms por item, limite ~700ms total
Loop apenas	linear

Arquivos de referência

• references/easing-curves.md — biblioteca de cubic-bezier nomeada com valores exatos, configurações de mola (Framer/react-spring/iOS) e orientação de duração por tipo de elemento.
• references/easing-graph-editor.md — Artesanato do Graph Editor do After Effects: gráfico de velocidade vs gráfico de valor, alças de easing e números de influência/velocidade, e receitas passo a passo de movimento rápido, overshoot, antecipação e bounce.
• references/twelve-principles.md — todos os 12 princípios Disney, cada um com um exemplo concreto e numérico de motion graphics.