Conceber animações 2D

Apresentação

UC02631 (50h · 4,5 pts) do curso Técnico de Multimédia. Cobre a animação 2D — princípios clássicos, keyframes e curvas, animação frame-by-frame vs cut-out (rigging), motion graphics, render e exportação. Liga ao storyboard/animatic (UC02199), ao guião (UC02632) e à publicação (UC02242).

Fundamentos

Persistência da visão e fps

A animação funciona porque o olho/cérebro funde imagens próximas no tempo, dando a ilusão de movimento.

Mais fps = mais fluido, mas também mais trabalho (mais desenhos/keyframes).

Quadro a quadro vs interpolação

• Frame-by-frame — cada frame é desenhado/posicionado (animação clássica, anime, frame animation).
• Tween / interpolação — definem-se keyframes (poses-chave) e o software preenche o entre (in-betweens) automaticamente. Base do cut-out/rigging e do motion graphics.

Ferramentas: - Adobe Animate (vetorial + tween), Toon Boom Harmony (clássica profissional). - OpenToonz, Krita (frame-by-frame, gratuitos). - Blender Grease Pencil (2D dentro de ambiente 3D, gratuito). - Spine, Moho, Rive (rigged/cut-out). - After Effects (motion graphics, composição).

Os 12 princípios da animação

(Disney, The Illusion of Life) — a base universal.

1. Squash & Stretch — deformação coerente que comunica peso e elasticidade sem perder o volume.
2. Anticipation (antecipação) — pequeno movimento contrário antes da ação principal (preparar o olho — agachar antes de saltar).
3. Staging — composição clara: só uma ideia/foco por momento (lê-se de longe).
4. Straight ahead vs Pose to pose — duas abordagens: desenhar a direito frame a frame (orgânico, imprevisível) ou definir poses-chave e preencher o entre (planeado, controlável).
5. Follow through & Overlapping action — partes do corpo (cabelo, pano) continuam depois da ação principal; partes diferentes movem-se em tempos diferentes (não rigidamente).
6. Slow in / Slow out (ease) — o movimento acelera e desacelera nos extremos; quase nada é linear no mundo real.
7. Arcs (arcos) — quase todo o movimento natural segue trajetórias curvas, não retas.
8. Secondary action — gestos secundários (apoio) que enriquecem a ação principal sem a competir.
9. Timing — o ritmo (quantos frames cada coisa demora) é a alma da animação; muda completamente o sentido.
10. Exaggeration — exagerar com gosto para clareza e expressão; "realista" não é o objetivo.
11. Solid drawing — desenho com volume, peso e perspetiva (ainda que estilizado).
12. Appeal — design e personalidade carismáticos: o público quer ver/seguir.

Sem estes princípios, "anima-se" tecnicamente mas o movimento não vive.

Keyframes, curvas e timing

Keyframes e in-betweens

Define-se uma pose A num frame e uma pose B noutro — o software calcula o caminho entre as duas (interpolação). Os in-betweens podem ser:

• Lineares — velocidade constante (mecânico, "robotizado").
• Eased (in/out) — acelera e desacelera (natural).
• Editáveis no graph editor (curvas Bezier) para controlo fino.

   POSE A ──────────── POSE B
   frame 1            frame 24
       ↑
  curva define
  a aceleração

Spacing = velocidade

A distância entre frames consecutivos (espaçamento) define a velocidade percebida: - Espaçamento curto e regular → lento. - Espaçamento crescente/decrescente → ease in/out. - Espaçamento grande → rápido.

Timing e peso

• Poucos frames entre poses → ação rápida.
• Muitos frames → ação pesada/lenta.
• Holds (pausas) entre ações dão respiração — é raro animar tudo o tempo todo.
• Peso (weight) — objetos pesados arrancam/param devagar, têm mais ease; leves saltam rápido.

Animação cut-out / rigged

Em vez de redesenhar cada frame, cria-se uma personagem em camadas (cabeça, braços, pernas, etc.) e anima-se com keyframes nas propriedades (posição, rotação, escala). Usa-se em motion graphics, animação online e jogos.

Rig

• Pivôs colocados nas articulações.
• Hierarquia pai-filho — mover o ombro move o braço todo.
• Ossos / IK (cinemática inversa) — animar a "mão" e o cotovelo segue.
• Naming / organização rigorosa das camadas é essencial.

Walk cycle (exemplo clássico)

Loop de ~8-12 frames com 4 poses-chave: 1. Contact (pé toca o chão). 2. Down/recoil (peso assenta). 3. Pass (perna passa por baixo do corpo). 4. High point (corpo no ponto alto).

Movimento dos braços oposto às pernas; cabeça oscila ligeiramente em arco; secundárias (cabelo, roupa) com follow through. É o exercício mais formativo.

Lip sync

Sincronizar a boca com a voz: mapear fonemas a um pequeno conjunto de bocas-padrão (A/E/I/O/U + consoantes principais + fechada/rest) e animar com o áudio como referência.

Motion graphics

Animação aplicada a texto, formas, ícones, infografias — explicar/persuadir visualmente.

• Tipografia animada (kinetic typography) — princípios da UC02258 + ritmo.
• Forma → ação — círculos, retângulos, linhas que se transformam, deslocam, aparecem.
• Ferramentas: After Effects (referência), Cavalry, Rive (interativo/web).
• Easing + timing dão o "polido" — mais do que qualquer efeito.

Som na animação

• A animação sincroniza-se com o som (anim ao ritmo, batidas, fala).
• Animatic (UC02199) com som provisório define o timing antes da animação fina.
• SFX/Foley (golpes, passos, "whooshes") dão peso percetível.
• Liga à UC02630 e UC02633 para som/mistura.

Render e exportação

• Render queue — fila de exportação no software.
• Para vídeo: H.264/H.265 em MP4 (web), ProRes/DNxHR (mestre).
• Para animação web/app leve: Lottie (JSON exportado por After Effects/Rive — escalável, leve, controlável por código).
• GIF / WebP animado — alternativas mais pesadas/limitadas.
• Definições: resolução e fps do projeto consistentes.

Workflow

1. Briefing + guião + storyboard/animatic (UC02632/UC02199).
2. Style frames — quadros estáticos que definem o look (aprovação do "visual").
3. Layouts e poses-chave; rigs prontos.
4. Animação base — blocking com poses-chave e timing rude.
5. Refinamento — eases, arcs, follow through, secondary action, holds.
6. Polimento — detalhes, lip sync, efeitos.
7. Som/SFX.
8. Render e exportação por destino.

Erros comuns

• Animação linear (sem ease) → "robótica".
• Sem anticipation ou follow through → ações secas.
• Tudo a mexer ao mesmo tempo (sem holds, sem overlapping).
• Movimentos retos (sem arcs).
• Timing demasiado rápido para "ler" a ação.
• Rig mal montado (pivôs errados, naming caótico).
• Render com fps/resolução errados; ficheiros enormes para a web.

Apêndices

A · Cheatsheet

12 princípios: squash/stretch · anticipation · staging
straight/pose · follow through · ease · arcs · secondary
timing · exaggeration · solid · appeal

Keyframes + curvas (ease in/out)   Spacing = velocidade
Cut-out: camadas + rigs + IK       Walk cycle (4 poses-chave)
Motion graphics: After Effects/Cavalry/Rive (Lottie p/ web)
Render: H.264 MP4 / ProRes mestre / Lottie web

B · Glossário

Anticipation. Movimento contrário antes da ação. Cut-out. Animação por camadas riggadas. Ease in/out. Aceleração/desaceleração natural. Follow through / Overlapping. Partes que continuam/movem desfasadas. IK. Inverse Kinematics. Keyframe. Pose-chave num frame. Lottie. Animação JSON exportada (web/app). Spacing. Distância entre frames (velocidade). Tween. Interpolação entre keyframes.

C · Recursos

• The Animator's Survival Kit (Richard Williams) — bíblia.
• The Illusion of Life (Thomas & Johnston, Disney) — origem dos 12 princípios.
• Vincenzo Lodigiani · The Illusion of Life (curta no YouTube com os 12 princípios).
• Blender Grease Pencil / Krita / OpenToonz — gratuitos.
• AE / Rive / Cavalry — motion graphics.
• LottieFiles · lottiefiles.com.