Tutorial: Physics-Based Animation

6 min read

Gumawa ng kahanga - hangang mga animation na ginagamit ang alun - alon, elastiko, at gravity effects na may keyframe sequencing.

Oras: 15 minuto Difficulty:** Sumulong

Kung Ano ang Iyong Gagawin

Ang isang dramatikong pamagat ay naghahayag sa pamamagitan ng physics-based text animation, orbital na mga elemento, at makinis na mga camera movement.

Physics-based title animation na may reflection at elastic effects

Saklaw ang mga Katangian

  • Bounce release — Ball-drop epekto na may makatotohanang pisika
  • Elastic release — Tagsibol-tulad ng spring sa ibabaw ng snap animation
  • Keyframe sequencing — Tiyak na naka-oras ng multi-election choreography
  • *Orbital na mga kaugnayan — Mga Elemento na umiikot sa gitnang bahagi
  • Camera animation — Mga epekto ng Smooth zoom at pan

Hakbang 1: Magtayo ng mga Kava

  1. Open PinePaper Editor
  2. Magtakda ng canvas na sukat sa YouTube Thumbnail (1280×720)*
  3. Ilagay ang background color sa #0a0a0a (malapit sa itim)

Hakbang 2: Gumawa ng Pangunahing Titulo

  1. Press T for Text Tool
  2. Click center canvas, tipo: PHYSICS**
  3. Sa Properties Panel:
    • Fint Size: 120**
    • Pamilyang Font: Inter (o anumang matapang na sans-serif)
    • Kulay: #ffffff
  4. Sentro sa Kambas

Hakbang 3: Idagdag ang Gravity Drop Animation

Itatanggal natin ang pamagat mula sa itaas na may epektong bolt.

  1. Piliin ang titulong teksto
  2. Buksan Timeline Panel (ibaba)
  3. Idagdag ang keyframe:
Panahon Posisyon Y Kabihasnan Pag - aani
0.0s -100 (sa labas ng screen) 0 —
0.3s 360 (gitna) 1 ang bulalas

Katumbas ng Kodigo:

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

Hakbang 4: Idagdag ang Subtitle na May Elastic Effect

  1. Gumawa ng substitusyon na teksto: IN MOSYON
  2. Bigat na sukat: *48, kulay: #60a5fa (blue)
  3. Katayuan sa ibaba ng pangunahing titulo

Idagdag ang elastic animation:

Panahon SEKS Kabihasnan Pag - aani
0.4s 0 0 —
0.8s 1 1 nababanat

Katumbas ng Kodigo:

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

Hakbang 5: Dagdagan ng Orbing Particles

Gumawa ng nakikitang interes sa pamamagitan ng umiikot na mga elemento.

  1. Gumawa ng isang maliit na bilog: reclusion 8, kulay #fbbf24 (amber)
  2. Posisyon malapit sa gitna
  3. Idagdag orbits kaugnay:
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. Ibabad at lumikha ng 2 pang mga particle na may iba’t ibang radii at bilis:
    • Particle 2: Paikot 120, bilis 0.7, kulay #f472b6 (pink)
    • Bahagi 3: Paikot 180, bilis 0.3, kulay #34d399 (green)

Hakbang 6: Idagdag ang Camera Zoom

Gumawa ng isang cinematic na pakiramdam sa pamamagitan ng paggawa ng kamera.

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

Hakbang 7: Preview at Export

  1. Pigain ang Space upang patiunang makita
  2. Baguhin ang panahon kung kinakailangan
  3. Export as WebM* (recommented) o MP4**
    • Gaano Katagal: 3 segundo
    • Frame Bilang: 60 fps (smother physics)
    • Loop: Oo (para sa social media)

Buong Kodigo

Narito ang buong kodigo ng animation para sa pagtukoy:

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

Mga pagbabago

Isinisiwalat ng Nakapangingilabot na Liham

Gumamit ng Liham na May pasuray - suray na animasyon:

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

Pag - alaala sa Landas

Gawing kasunod ng Bezier kurba ang mga elemento:

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

Mga Mungkahi

Timing ang lahat ng bagay — Magsimulang mga elemento sa bahagyang magkakaibang panahon (0.1-0.2 ang pagitan) para sa mas natural na pakiramdam.

Combine repens — Gumamit ng bounce para sa paglapag, elastic para sa scaling, easeOut para sa laos.

60fps para sa pisika — Ang mas mataas na halaga ng frame ay gumagawa sa pag-ikot/elastic effects na tila mas makinis.

Susunod na mga Hakbang