Rover54/Princípios de Animação

O que Princípios de Animação faz?

Decida como algo deve se mover para que pareça certo — independentemente da ferramenta usada para construí-lo. Esta skill responde sobre timing, easing, espaçamento, peso e ritmo. Ela não escolhe uma pilha tecnológica; produz números concretos (durações, curvas cubic-bezier, deslocamentos de stagger, configurações de mola) prontos para serem usados em 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 de um clipe ou transição, curva de easing e deslocamento de stagger.
• Revisar se o movimento respeita a intuição física (peso, follow-through, arcos).
• Sincronizar quadros-chave a uma batida musical ou acento de edição.

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

Cada pedaço de movimento deve responder a três perguntas antes de você escolher uma duração ou curva. Ignore-as e você obterá movimento tecnicamente correto que parece vazio. Estes são o vocabulário compartilhado ao qual o restante da coleção se refere.

Pilar	A pergunta	O que direciona
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? Preparação → ação → resolução	Sequenciamento, encenação, o que entra quando
Técnica de animação	Como torná-lo crível?	Física, movimento secundário, arcos, follow-through

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

Movimento monótono = apenas a coisa principal se move. Movimento crível opera em três camadas simultaneamente:

• 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 se ajustando, um rótulo se acomodando tarde).
• Ambiente — vida de fundo que nunca exige atenção (gradiente lento, pulso de baixo contraste).

A camada de julgamento (direção-de-arte-de-movimento) chama estes de Herói / Suporte / Textura — mesmas três camadas, classificadas pelo que merece movimento. Primária ≈ Herói, Secundária ≈ Suporte, Ambiente ≈ Textura.

Princípios centrais

Easing é a maior alavanca

Movimento linear soa 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 à ação:

• Entrar / aparecer -> ease-out (início rápido, parada suave). O objeto chega com energia e desacelera até parar. cubic-bezier(0.16, 1, 0.3, 1).
• Sair / desaparecer -> ease-in (início suave, 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).
• Lúdico / com marca -> leve overshoot. cubic-bezier(0.34, 1.56, 0.64, 1) (o 1.56 ultrapassa 1.0, criando um overshoot-e-parada que soa como "peso").

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

Modelando easing à mão (After Effects). Ao animar manualmente em vez de fornecer uma curva, os mesmos princípios se aplicam ao Editor de Gráficos: 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 uma parada suave. F9 (Easy Ease) é apenas um ponto de partida simétrico de 33% — torne-o assimétrico. Consulte references/easing-graph-editor.md para técnicas de leitura do Editor de Gráficos, alças de easing e influência/velocidade, além de receitas passo a passo de overshoot, antecipação e bounce (incluindo uma expressão de bounce amortecido).

Timing comunica peso e importância

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

Distância e tamanho escalam a duração. Um ícone pequeno 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 parecerá sem peso. Uma escala prática: mantenha a velocidade percebida aproximadamente constante adicionando ~30-50% de duração quando a distância ou área aproximadamente dobra. Objetos pesados começam devagar e overshootam menos; objetos leves estalam e podem quicar.

Espaçamento e stagger criam ritmo

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

• Listas / itens sequenciais: 40-80ms entre itens.
• Grades densas: 20-40ms (mais itens, menos atraso por item, ou a cauda se arrasta).
• Limite a revelação total em aproximadamente 600-800ms para um grupo; se contagem * 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 de 1/3 (duas formas, ambas universais):

• Distância — nenhum elemento percorre mais de ~1/3 da tela sem um quadro-chave intermediário ou uma mudança de escala/opacidade. Deslizamentos longos e ininterruptos soam como "o template se moveu", não "algo aconteceu".
• Simultaneidade — com 3+ elementos, mantenha no máximo ~1/3 em movimento ativo por vez. Os demais permanecem parados ou movem-se como ambiente. Tudo se movendo junto = ruído sem ponto focal.

Antecipação e follow-through vendem movimento físico

• Antecipação: um pequeno contra-movimento antes da ação principal (um botão diminui scale 0.95 antes de aparecer, um personagem agacha antes de pular). 60-120ms é suficiente.
• Follow-through / ação sobreposta: partes secundárias continuam se movendo após o corpo principal parar (um card herói pousa, então sua sombra e rótulo se acomodam 40-80ms depois). Distribua a parada de elementos anexados em vez de parar tudo no mesmo quadro.
• Arcos: curvas de movimento naturais; a translação puramente linear de um objeto orgânico parece mecânica. Adicione um leve arco a x/y ou anime um caminho.

Sincronização com batida e ritmo

Quando o movimento acompanha áudio, posicione os quadros-chave 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 os 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 consistentemente.

Mola vs. movimento baseado em duração

Molares (massa / rigidez / amortecimento) determinam sua própria duração e parecem mais físicos para movimento interativo e interrompível (arrastar-soltar, gestos). Duração + easing é melhor para sequências coreografadas e travadas na linha do tempo (vídeo, revelações atreladas ao scroll) onde a sincronização exata é importante. 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; reduza a duração em 30%, afie a curva.
• Parece barato/instável -> 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 follow-through, caminhos em linha reta; adicione arcos e sobreposição.

Referência rápida

Necessidade	Use
Entrada	cubic-bezier(0.16, 1, 0.3, 1), 300-500ms
Saída	cubic-bezier(0.7, 0, 0.84, 0), 200-300ms
Movimento	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
Apenas loop	linear

Arquivos de referência

• references/easing-curves.md — biblioteca nomeada de cubic-bezier 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 — Técnicas de Editor de Gráficos 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 snappy, overshoot, antecipação e bounce.
• references/twelve-principles.md — todos os 12 princípios da Disney, cada um com um exemplo numérico concreto de animação gráfica.