Yardım: Fizik Temelli Animasyon

6 min read

Yavaş, elastik ve yerçekimi efektleri kullanarak çarpıcı animasyonlar oluşturun.

Time: 15 dakika Difficulty: Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced Advanced

What You’ll Create

Dramatik bir başlık fizik tabanlı metin animasyonu, yörünge elemanları ve düzgün kamera hareketleri ile ortaya çıkıyor.

Physics- bazlı başlık animasyonu ve elastik etkiler

Özellikler Covered

  • Bounce easing – Gerçek fizikle Ball-drop etkisi
  • Elastic easing – Spring-like overshoot animasyon
  • Keyframe sequencing - Precisely timed multi-element choreography
  • Orbital ilişkiler - Bir merkez noktası etrafında yörüngede yörüngeler
  • Camera animasyonu – Smooth zoom ve pan effects

Adım 1: Set Up Blood

  1. Open PinePaper Editor
  2. Tuval boyutunu YouTube Thumbnail (1280×720)
  3. #0a0a0a’ya arka arka rengi ayarlayın (near black)

Adım 2: Ana Başlıkı Oluşturun

  1. Basın T for Text Tool
  2. Click center tuval, type: PHYSICS
  3. Özellikler Panel:
    • Font Boyut: 120
    • Font Family: Inter (veya herhangi bir cesur sans-serif)
    • Renk: #ffffff
  4. Tuval Merkezi

3. Adım: Gravity Drop Animation

Başlık yukarıdan bir sıçrama etkisi ile düşeriz.

  1. Başlık metnini seçin
  2. Open Timeline Panel (altın)
  3. Anahtar çerçeveleri ekleyin:
Zaman Pozisyon Y Opakity Easing
0.0s -100 (off screen) 0 —
0.3s 360 (merkez) 1 adım

Kod eşdeğer:

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

Adım 4: Elastik Etkisi ile Subtitle ekleyin

  1. Subtitle text: IN MOTION
  2. Font boyutu: 48, renk: #60a5fa (mavi)
  3. Ana başlık altında Pozisyon

Elastik animasyon ekleyin:

Zaman Scale Opakity Easing
0.4s 0 0 —
0.8s 1 1 elastik

Kod eşdeğer:

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

Adım 5: Orbiting Parçacıkları Ekle

Yörünge elemanları ile görsel ilgi yaratın.

  1. Küçük bir çember oluşturun: yarı 8, renk #fbbf24 (amber)
  2. Konum near center
  3. Ek orbits ilişki:
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. Farklı radii ve hızlarla 2 tane daha fazla parçacık oluşturmak:
    • Parçacık 2: 120, hız 0.7, renk #f472b6 (pink)
    • Parçacık 3: 180, hız 0.3, renk #34d399 (yeşil)

Adım 6: Kamera Zoom ekle

Kamera animasyonuyla sinematik bir duygu oluşturun.

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

Adım 7: Preview and Export

  1. Basın Space
  2. İhtiyacınız olduğu gibi zamanlama
  3. WebM (recommended) veya MP4
    • Süre: **3 saniye
    • Frame Rate: 60 fps (smoother Physics)
    • Ring: Evet (sosyal medya için)

Tamam Code

İşte referans için tam animasyon kodu:

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

Variations

Staggered Letter Açıklama

Kalıcı animasyonla Mektup Collage kullanın:

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

Path Animation Path

Bir Bezier eğrisini takip edin:

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 her şeydir - biraz farklı zamanlarda elementlere başlayın (0.1-0.2s ayrı) daha doğal hissetmek için.

Combine easings - iniş için bounce’yu kullanın, elastic’yi ölçeklendirmek için kullanın.

60fps for Physics – Yüksek çerçeve oranları, çürük etkiler görünür.

Sonraki Adımlar