Tutorial: Animação baseada em física

Crie animações impressionantes usando efeitos de salto, elástico e gravidade com sequenciamento de keyframe.

Tempo: 15 minutos Dificuldade: Avançado

O que você vai criar

Um título dramático revela com animação de texto baseada em física, elementos orbitais e movimentos suaves da câmera.

Recursos Cobertos

• Fácil de saltar — Efeito bola-gota com física realista
• Relaxamento elástico — Animação de sobreposição tipo Primavera
• Sequenciamento de keyframe — Coreografia multi-elemento cronometrada precisamente
• Relações orbitais — Elementos orbitando em torno de um ponto central
• Animação de câmara — Efeitos suaves de zoom e pan

Passo 1: Configurar a Tela

1. Abrir o Editor PinePaper
2. Define o tamanho da tela para YouTube Thumbnail (1280×720)
3. Mudar a cor de fundo para #0a0a0a (perto do preto)

Passo 2: Criar o Título Principal

1. Pressione T para a Ferramenta de Texto
2. Clique na tela central, digite: PHYSICS
3. Painel de Propriedades:
   • Tamanho da fonte: 120
   • Família de fontes: Inter (ou qualquer sans-serif arrojado)
   • Cor: #ffffff
4. Centro sobre tela

Passo 3: Adicionar animação de gota de gravidade

Vamos fazer o título cair de cima com um efeito de rejeição.

1. Selecione o texto do título
2. Abrir Painel de Linha do Tempo (baixo)
3. Adicionar quadros de teclas:

Equivalente de código:

const title = app.create('text', {
  content: 'PHYSICS',
  x: 640, y: -100,
  fontSize: 120,
  color: '#ffffff'
});

app.addAnimation(title.data.id, [
  { time: 0, properties: { y: -100, opacity: 0 } },
  { time: 0.3, properties: { y: 360, opacity: 1 }, easing: 'bounce' }
]);

Passo 4: Adicionar legenda com efeito elástico

1. Criar texto de legendas: IN MOTION
2. Tamanho da fonte: 48, cor: #60a5fa (azul)
3. Posição abaixo do título principal

Adicionar animação elástica:

Equivalente de código:

const subtitle = app.create('text', {
  content: 'IN MOTION',
  x: 640, y: 450,
  fontSize: 48,
  color: '#60a5fa'
});

app.addAnimation(subtitle.data.id, [
  { time: 0.4, properties: { scale: 0, opacity: 0 } },
  { time: 0.8, properties: { scale: 1, opacity: 1 }, easing: 'elastic' }
]);

Passo 5: Adicionar Partículas Órbitas

Criar interesse visual com elementos orbitais.

1. Criar um círculo pequeno: raio 8, cor #fbbf24 (âmbar)
2. Posição perto do centro
3. Adicionar orbits relation:

const particle1 = app.create('circle', {
  x: 640, y: 360,
  radius: 8,
  color: '#fbbf24'
});

// Make it orbit around the title center
app.addRelation(particle1.data.id, title.data.id, 'orbits', {
  radius: 150,
  speed: 0.5,
  direction: 'clockwise'
});

4. Duplicar e criar mais 2 partículas com diferentes raios e velocidades:
   • Partícula 2: raio 120, velocidade 0.7, cor #f472b6 (rosa)
   • Partícula 3: raio 180, velocidade 0.3, cor #34d399 (verde)

Passo 6: Adicionar zoom da câmera

Crie uma sensação cinematográfica com animação de câmera.

// Zoom in slightly during the reveal
app.addRelation('camera', null, 'camera_animates', {
  duration: 2,
  keyframes: [
    { time: 0, zoom: 0.9, center: [640, 360] },
    { time: 0.5, zoom: 1.1, center: [640, 360], easing: 'easeOut' },
    { time: 2, zoom: 1, center: [640, 360], easing: 'easeInOut' }
  ]
});

Passo 7: Visualização e Exportação

1. Pressione Space para visualização
2. Ajustar o tempo conforme necessário
3. Exportar como WebM (recomendado) ou MP4
   • Duração: 3 segundos
   • Taxa de Molduras: 60 fps (fisica smoother)
   • Loop: Sim (para redes sociais)

Código completo

Aqui está o código completo de animação para referência:

// Setup
app.setCanvasSize('youtube-thumbnail');
app.setBackgroundColor('#0a0a0a');

// Main title with gravity drop
const title = app.create('text', {
  content: 'PHYSICS',
  x: 640, y: -100,
  fontSize: 120,
  color: '#ffffff',
  fontFamily: 'Inter'
});

app.addAnimation(title.data.id, [
  { time: 0, properties: { y: -100, opacity: 0 } },
  { time: 0.3, properties: { y: 360, opacity: 1 }, easing: 'bounce' }
]);

// Subtitle with elastic spring
const subtitle = app.create('text', {
  content: 'IN MOTION',
  x: 640, y: 450,
  fontSize: 48,
  color: '#60a5fa'
});

app.addAnimation(subtitle.data.id, [
  { time: 0.4, properties: { scale: 0, opacity: 0 } },
  { time: 0.8, properties: { scale: 1, opacity: 1 }, easing: 'elastic' }
]);

// Orbiting particles
const colors = ['#fbbf24', '#f472b6', '#34d399'];
const orbits = [
  { radius: 150, speed: 0.5 },
  { radius: 120, speed: 0.7 },
  { radius: 180, speed: 0.3 }
];

orbits.forEach((orbit, i) => {
  const particle = app.create('circle', {
    x: 640, y: 360,
    radius: 8,
    color: colors[i]
  });

  app.addRelation(particle.data.id, title.data.id, 'orbits', {
    radius: orbit.radius,
    speed: orbit.speed,
    phase: i * (Math.PI * 2 / 3) // Spread evenly
  });
});

// Camera animation
app.addRelation('camera', null, 'camera_animates', {
  duration: 2,
  keyframes: [
    { time: 0, zoom: 0.9, center: [640, 360] },
    { time: 0.5, zoom: 1.1, center: [640, 360], easing: 'easeOut' },
    { time: 2, zoom: 1, center: [640, 360], easing: 'easeInOut' }
  ]
});

// Play with 3-second loop
app.playKeyframeTimeline(3, true);

Variações

Revelar Cartas Esboçadas

Usar Colagem de Cartas com animação escalonada:

const collage = app.letterCollage.create('PHYSICS', {
  style: 'tile',
  palette: 'neon',
  fontSize: 80
});

app.letterCollage.applyStaggeredAnimation(collage.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.4,
  easing: 'elastic'
});

Animação do Caminho

Faça os elementos seguirem uma curva de Bezier:

const star = app.create('star', {
  x: 100, y: 360,
  radius: 20,
  color: '#fbbf24'
});

// Animate along a curved path
app.animate(star, {
  animationType: 'path',
  pathPoints: [
    [100, 360],   // Start
    [400, 200],   // Control point 1
    [800, 500],   // Control point 2
    [1180, 360]   // End
  ],
  pathSmooth: true,
  animationSpeed: 0.3
});

Dicas Pro

Timing é tudo — Iniciar elementos em momentos ligeiramente diferentes (0,1-0,2s separados) para uma sensação mais natural.

Combine easings — Use bounce para aterrissar, elastic para escalar, easeOut para desbotar.

60fps para a física — Taxas de quadros mais elevadas fazem efeitos de salto/elástico parecer mais suave.

Passos Próximos

• Morphing Animation — Transformar formas umas nas outras
• Map Animations — Animar dados geográficos
• Sistema de Relação — Mergulho profundo nas relações de item