Oktatói: Fizikai alapú animáció

Hozzon létre lenyűgöző animációk segítségével ugrál, rugalmas, és gravitációs hatások kulcskeret szekvenálás.

• • Time: * * 15 perc
• • Nehéz: * * Speciális

What You 'll Create

A drámai cím felfedi a fizika-alapú szöveges animáció, orbitális elemek, és sima kameramozgások.

Jellemzők

• • • Bounce easing * * - Ball- drop effektus reális fizikával
• • • Elasztikus lazítás * * - Spring- like overshot animáció
• • • Keyframe sorrend * * - Pontosan időzített multielemes koreográfia
• • • Orbitális kapcsolatok * * - Elemek keringenek a középpont körül
• • • Camera animáció * * - Sima zoom és pan effektek

1. lépés: Állítsuk fel a kannákat

1. A PinePaper szerkesztő megnyitása
2. Állítsa vászon mérete * * YouTube Tumbnail (1280 × 720) * *
3. Háttér színe #0a0a0a (közel fekete)

2. lépés: A főcím létrehozása

1. Nyomja meg a T szöveges eszköz
2. Kattintson a középső vászonra, típus: * * PHYSICS * *
3. Tulajdonságok panel:
   • Betűméret: * * 120 * *
   • Betűtípus Család: * * Inter * * (vagy bármilyen merész szansz- serif)
   • Szín: #ffffff
4. Középső vászon

3. lépés: Gravity Drop Animáció hozzáadása

A címet felülről dobjuk le egy ugrással.

1. Válassza ki a cím szövegét
2. Nyitott * * Timeline Panel * * (alsó)
3. Billentyűzet hozzáadása:

Kódegyenérték:

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

4. lépés: Felirat hozzáadása rugalmas hatással

1. Felirat létrehozása: * * IN MOTION * *
2. Betűméret: * * 48 * *, szín: #60a5fa (kék)
3. A főcím alatti pozíció

Elasztikus animáció hozzáadása:

Kódegyenérték:

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

5. lépés: Orbitális részecskék hozzáadása

Hozzon létre vizuális érdeklődés a keringési elemek.

1. Hozzon létre egy kis kört: sugár * * 8 * *, szín #fbbf24 (borostyán)
2. Pozíció a központ közelében
3. Hozzáadás * * pályák * * kapcsolat:

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. További 2 részecske duplikálása és létrehozása különböző sugarakkal és sebességekkel:
   • Részecske 2: sugár 120, sebesség 0.7, szín #f472b6 (rózsaszín)
   • Részecske 3: sugár 180, sebesség 0.3, szín #34d399 (zöld)

Lépés: Kamera nagyítás hozzáadása

Hozzon létre egy mozi érzés kamera animáció.

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

7. lépés: Előnézet és exportálás

1. Nyomja meg a Space preview
2. Az időzítés módosítása szükség szerint
3. Export * * WebM * * (ajánlott) vagy * * MP4 * *
   • Időtartam: * * 3 másodperc * *
   • Keretarány: * * 60 fps * * (simább fizika)
   • Loop: * * Igen * * (közösségi média számára)

Teljes kód

Itt a teljes animációs kód:

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

Változatok

Elöntött levél

Levél ütközése szakaszos animációval:

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

Útvonal animáció

Az elemek Bezier görbét követnek:

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 Tippek

• • Timing is everything * * - Indítsa elemek kissé különböző időpontokban (0.1-0.2 egymástól) több természetes érzés.

• • Combine easings * * - Használd az bounce-t a leszálláshoz, elastic-t a méretezéshez, easeOut-t a halványuláshoz.

• • 60fps fizika * * - Magasabb keret árak teszi ugrál / rugalmas hatások úgy tűnik, simábban.

Következő lépések

• [Morphing Animation] (/tutorials/morphing) - Alakzatalakítás egymásba
• [Map Animations] (/tutorials/map-animation) - Animáció földrajzi adatok
• [Relation System] (/features/relations) - Mély merülés elem kapcsolatok