Skip to main content
Nesta página

Os 12 Princípios no Motion Design

Documentados por Frank Thomas e Ollie Johnston no livro “The Illusion of Life” (1981), com base no trabalho dos animadores da Disney. Décadas depois, continuam sendo o fundamento de qualquer animação que pareça viva, inclusive o motion design que você faz no after.

Por que vale estudar

É tentador pular direto pra expressões e plugins. Mas timing ruim e easing mecânico são os problemas mais visíveis em trabalhos de iniciante, e são 100% resolvidos pelos princípios.

Aprenda pra saber quando quebrar

Os princípios foram pensados pra animação de TV e cinema. Motion designer anima UI, interface, ledwall, instalação, o que aparecer. Não vai usar arco em todo elemento de UI, nem exagero em animação corporativa. Aprende pra ter vocabulário, não pra seguir a risca.

Os 12: Squash and Stretch, Antecipação, Staging, Straight Ahead / Pose to Pose, Follow Through, Slow In Slow Out, Arc, Secondary Action, Timing, Exaggeration, Solid Drawing, Appeal.

Squash and Stretch

Objetos reais se deformam quando se movem. Uma bola amassa no impacto e estica durante a queda. No after, anima scale em eixos opostos durante o movimento.

Regra do volume

O volume total deve permanecer constante. Se scale Y aumenta, scale X diminui proporcionalmente.

Antecipação

Antes da ação principal, um movimento preparatório na direção oposta. Bola que vai saltar primeiro se comprime. Ícone que vai crescer primeiro encolhe levemente.

Pra um botão que vai escalar pra cima: escala primeiro pra 95% por 3-4 frames, depois pra 105%, depois 100% final.

Slow In / Slow Out

Nada na natureza para ou começa de forma abrupta. F9 aplica Easy Ease, mas o padrão costuma ser fraco demais. No graph editor, puxa os handles pra criar curvas mais dramáticas.

Entrada rápida com saída lenta: handle de saída curto, handle de entrada longo. Tem uma seção inteira sobre isso em Keyframes e Graph Editor.

Staging

Apresente uma ideia por vez. Não anime 5 coisas simultâneas. Escalone o timing pra guiar o olhar.

Follow Through e Overlapping

Elementos secundários continuam depois que o movimento principal para. O título para, o underline ainda escorrega. O logo pousa, o brilho aparece meio segundo depois.

Arc

Movimentos naturais descrevem arcos, não linhas retas. Confere o motion path das propriedades de position animadas e curva os segmentos com os handles bezier dos keyframes.

Timing

Distância em frames entre os keyframes. Tem uma página dedicada só a isso. Os pontos mostram o espaçamento — mesmos frames, sensações completamente diferentes.

Exaggeration

Amplifica a intenção pra que a ação seja lida claramente.

Um check que confirma algo cresce até 120% antes de voltar a 100%. Um botão que chama atenção pulsa mais do que seria realista. Não precisa parecer cartoon, pode ser sutil, mas tem que estar lá.

Secondary Action

Ações secundárias reforçam a principal. O logo pulsa levemente quando o texto aparece. O ícone dá um pequenininho bounce depois que o texto pousa.

Geralmente vira stagger: ação principal primeiro, elementos secundários com 3-5 frames de delay. Mas com intenção, não stagger automático.

Straight Ahead e Pose to Pose

No after, quase sempre trabalhamos em Pose to Pose: define os keyframes extremos, o after interpola o meio. Previsível e controlável.

Bloca tudo com hold, sente o timing, aí amacia com F9.

Straight Ahead (quadro a quadro do começo ao fim) aparece em animações procedurais e expressões que evoluem no tempo, tipo wiggle ou simulação de líquido.

Solid Drawing e Appeal

Os dois mais difíceis de aplicar diretamente no motion design.

Solid Drawing vira consistência visual: um círculo que anima não muda de proporção sem razão, um logo 3D mantém o mesmo peso em qualquer ângulo.

Appeal é a qualidade do movimento que faz o espectador querer assistir. Difícil de definir, você sabe quando falta. É por isso que algumas animações com easing “certo” parecem mortas, e outras com easing “errado” parecem cheias de vida. Vem de prática e de assistir muita coisa boa.

Recursos