Tutorial: Physikbasierte Animation

6 min read

Erstellen Sie atemberaubende Animationen mit Bounce-, Elastik- und Schwerkrafteffekten mit Keyframe-Sequenzierung.

Zeit: 15 Minuten Schwierigkeit: Fortgeschritten

Was du erschaffen wirst

Ein dramatischer Titel enthüllt mit physikbasierter Textanimation, Orbitalelementen und glatten Kamerabewegungen.

Physics-basierte Titelanimation mit Bounce und elastischen Effekten

Erfasste Merkmale

  • Bounce easing — Ball-Drop-Effekt mit realistischer Physik
  • Elastische Lockerung — Spring-like overshoot animation
  • Keyframe-Sequenzierung — Zeitgenaue Multielement-Choreografie
  • Orbitale Beziehungen - Elemente, die einen Mittelpunkt umkreisen
  • Kameraanimation — Glatte Zoom- und Schwenkeffekte

Schritt 1: Canvas einrichten

  1. Open PinePaper Editor
  2. Legen Sie die Leinwandgröße auf YouTube Thumbnail (1280 × 720)
  3. Hintergrundfarbe auf #0a0a0a einstellen (nahezu schwarz)

Schritt 2: Erstellen Sie den Haupttitel

  1. T für Text Tool
  2. Click Center Canvas, Typ: PHYSICS
  3. Im Properties Panel:
    • Schriftgröße: 120
    • Schriftfamilie: Inter (oder eine fette Sans-Serif)
    • Farbe: #ffffff
  4. Zentrum auf Canvas

Schritt 3: Add Gravity Drop Animation

Wir werden den Titel von oben mit einem Bounce-Effekt fallen lassen.

  1. Wählen Sie den Titeltext
  2. Open Timeline Panel (unten)
  3. Keyframes hinzufügen:
Uhrzeit Position Y Trübung Lockerung
0.0s -100 (off screen) 0 —
0.3s 360 (mitte) 1 abprallen

Codeäquivalent:

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

Schritt 4: Untertitel mit elastischem Effekt hinzufügen

  1. Untertiteltext erstellen: IN MOTION
  2. Schriftgröße: 48, Farbe: #60a5fa (blau)
  3. Position unter Haupttitel

Elastische Animation hinzufügen:

Uhrzeit Waage Trübung Lockerung
0.4s 0 0 —
0.8s 1 1 elastisch

Codeäquivalent:

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

Schritt 5: Hinzufügen von umlaufenden Partikeln

Erstellen Sie visuelles Interesse mit umlaufenden Elementen.

  1. Erstellen Sie einen kleinen Kreis: Radius 8, Farbe #fbbf24 (Bernstein)
  2. Position nahe dem Zentrum
  3. Add 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'
});
  1. Duplizieren und erstellen Sie 2 weitere Partikel mit unterschiedlichen Radien und Geschwindigkeiten:
    • Teilchen 2: Radius 120, Geschwindigkeit 0,7, Farbe #f472b6 (rosa)
    • Partikel 3: Radius 180, Geschwindigkeit 0,3, Farbe #34d399 (grün)

Schritt 6: Kamera-Zoom hinzufügen

Erstellen Sie ein filmisches Gefühl mit Kameraanimation.

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

Schritt 7: Vorschau und Export

  1. Drücken Sie Space zur Vorschau
  2. Timing nach Bedarf anpassen
  3. Exportieren als WebM (empfohlen) oder MP4
    • Dauer: 3 Sekunden
    • Frame Rate: 60 fps (glänzende Physik)
    • Loop: Ja (für Social Media)

Vollständiger Code

Hier ist der vollständige Animationscode als Referenz:

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

Abweichungen

Staggered Letter Reveal

Verwenden Sie Letter Collage mit gestaffelter Animation:

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

Pfadanreicherung

Make Elemente folgen einer Bezier-Kurve:

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

Pro Tipps

Timing ist alles - Startelemente zu leicht unterschiedlichen Zeiten (0.1-0.2s auseinander) für ein natürlicheres Gefühl.

Easings kombinieren - Verwenden Sie bounce für die Landung, elastic für die Skalierung, easeOut für Fades.

60fps für Physik - Höhere Frameraten lassen Bounce / elastische Effekte glatter aussehen.

Nächste Schritte