Tutorial: Animación basada en física

Cree animaciones impresionantes usando efectos de rebote, elástico y gravedad con secuenciación de claves.

Hora: 15 minutos Dificultad Avances

Lo que crearás

Un título dramático revela con la animación de texto basada en la física, elementos orbitales y movimientos de cámara suaves.

Características cubiertas

• Asesinamiento de ratos - Efecto de salto de bola con física realista
• Elastic easing — La animación del overshoot de primavera
• Secuenciación de claves — coreografía de varios elementos con tiempo preciso
• Relaciones orbitales — Elementos orbitando alrededor de un punto central
• Animación de cámara — Ampliación de volumen y efectos de pan

Paso 1: Establece Canvas

1. Open PinePaper Editor
2. Establece el tamaño del lienzo a Tube Thumbnail (1280×720)
3. Establecer color de fondo a #0a0a0a (cerca de negro)

Paso 2: Crear el Título Principal

1. Prensa T para la herramienta de texto
2. Haga clic en lienzo central, tipo: PHYSICS
3. In Properties Panel:
   • Tamaño de la fuente: 120
   • Familia de fuentes: Inter (o cualquier negrita sans-serif)
   • Color: #ffffff
4. Centro sobre lienzo

Paso 3: Add Gravity Drop Animation

Haremos caer el título de arriba con un efecto de rebote.

1. Seleccione el texto del título
2. Open Timeline Panel (bottom)
3. Agregue marcos clave:

Código equivalente:

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' }
]);

Paso 4: Add Subtitle with Elastic Effect

1. Crear texto subtítulo: In MOTION
2. Tamaño de la fuente: 48, color: #60a5fa (azul)
3. Posición debajo del título principal

Añadir animación elástica:

Código equivalente:

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' }
]);

Paso 5: Agrega partículas orbitales

Crear interés visual con elementos de órbita.

1. Crear un pequeño círculo: radio 8, color #fbbf24 (amber)
2. Posición cerca del centro
3. Agregar orbits relación:

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 y crear 2 partículas más con diferentes radios y velocidades:
   • Partícula 2: radio 120, velocidad 0.7, color #f472b6 (pink)
   • Partícula 3: radio 180, velocidad 0.3, color #34d399 (verde)

Paso 6: Agregar el Zoom de la cámara

Cree una sensación cinematográfica con la animación de la cámara.

// 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' }
  ]
});

Paso 7: Vista previa y exportación

1. Presione Space para previsualizar
2. Ajuste el tiempo según sea necesario
3. Exportar como WebM (recomendado) o MP4
   • Duración: 3 segundos
   • Tasa de marco: 60 fps (física madre)
   • Loop: Sí (para las redes sociales)

Código completo

Aquí está el código de animación completo para referencia:

// 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);

Variaciones

Revelación de carta estancada

Use Collage de letras con animación 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'
});

Animación del camino

Hacer que los elementos sigan una curva 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
});

Consejos Pro

El juego es todo — Comience elementos en tiempos ligeramente diferentes (0.1-0.2s separados) para una sensación más natural.

Easings combinados — Use bounce para el aterrizaje, elastic para el escalado, easeOut para los fades.

60fps para la física — Las tasas de marco más altas hacen que los efectos de rebote / elástico se vean más suaves.

Siguientes pasos

• [Morphing Animation] (/tutorials/morphing) — Transformar formas entre sí
• [Map Animations] (/tutorials/map-animation) — Datos geográficos aniquilados
• [Sistema de Relación] (/features/relations) — Inmersión profunda en las relaciones con los elementos