Tutorial: Physics- Berdasarkan Animation

Membuat animasi menakjubkan menggunakan bounce, elastik, dan efek gravitasi dengan urutan keyframe.

• • Waktu: * * 15 menit
• • Kesulitan: * * Tingkat lanjut

What You 'll Create

Judul yang dramatis mengungkapkan dengan animasi teks berbasis fisik, elemen orbital, dan gerakan kamera halus.

Fitur Terselubung

• • • Bounce easing * * - efek ball- drop dengan fisika realistis
• • • Abistik mengurangi * - Spring- seperti animasi overshoot
• • • Keyframe urutan * * - Tepat waktu koreografi multi- elemen
• • • Hubungan orbit * * - Elemen mengorbit di sekitar titik pusat
• • • Animasi kamera * * - Efek zoom dan pan halus

Langkah 1: Atur Kanvas

1. Buka Penyunting PinePaper
2. Set ukuran kanvas ke * * YouTube Thumbnail (1280 × 720) * *
3. Atur warna latar belakang ke td 0 (didekat hitam)

Langkah 2: Buat Judul Utama

1. Tekan untuk Alat Teks
2. KLIK pusat kanvas, tipe: * * PHYSICS * *
3. Dalam Panel Properti:
   • Ukuran Fonta: * * 120 * *
   • Keluarga Fonta: * * Inter * * (atau sans-serif berani)
   • Warna:
4. Tengah pada kanvas

Langkah 3: Tambah Animasi Penurunan Gravitasi

Kami akan membuat drop judul dari atas dengan efek bouncing.

1. Pilih teks judul
2. Buka * * Panel Waktu * * (bawah)
3. Tambah keyframe:

Setara kode:

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

Langkah 4: Tambah Subtitel dengan Efek Elastik

1. Buat teks subjudul: * * IN MOTION * *
2. Ukuran fonta: * * 48 * *, warna: td 0 (biru)
3. Posisi di bawah judul utama

Tambah animasi elastis:

Setara kode:

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

Langkah 5: Tambah Partikel Orbiting

Buat ketertarikan visual dengan elemen yang mengorbit.

1. Membuat lingkaran kecil: radius * * 8 * *, warna # 0 (amber)
2. Posisi dekat tengah
3. Tambah * * orbit * * hubungan:

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. Duplikasi dan menciptakan 2 partikel lagi dengan radii dan kecepatan yang berbeda:
   • Partikel 2: radius 120, kecepatan 0.7, warna # 0 (pink)
   • Partikel 3: radius 180, kecepatan 0.3, warna # 0 (hijau)

Langkah 6: Tambah Pembesaran Kamera

Membuat sinematik dengan animasi 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' }
  ]
});

Langkah 7: Pratilik dan Ekspor

1. Press # 0 # to preview
2. Sesuaikan waktu seperti yang dibutuhkan
3. Ekspor sebagai * * WebM * * (disarankan) atau * * MP4 * *
   • Durasi: * * 3 detik * *
   • Laju Bingkai: * 60 fps * * (fisika halus)
   • Loop: * * Ya * * (untuk media sosial)

Kode Lengkap

Ini kode animasi penuh untuk referensi:

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

Variabel

Pengungkapan Huruf Terstaggered

Gunakan Koleksi Huruf dengan animasi terhuyung:

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

Animasi Path

Membuat elemen mengikuti kurva 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
});

Pro Tips

• • Timing adalah segalanya * * - elemen awal pada waktu yang sedikit berbeda (0.1-0.2s terpisah) untuk merasakan lebih alami.

Gunakan untuk mendarat.

• • 60fps untuk fisika * * - tingkat frame yang lebih tinggi membuat bounce / elastic efek terlihat halus.

Langkah Berikutnya

• [Animasi Morphing] (t 0) - Berubah bentuk menjadi satu sama lain
• [Animasi Peta] (tidak) Data Animasi geografis
• • Deep menyelam ke dalam hubungan butir