Yardım: Bir Animasyon Motivasyonu Post

Letter Collage animasyonları kullanarak Instagram Hikayeleri için bir göz alıcı animasyonu oluşturmak öğrenin.

Time: 10 dakika Difficulty: Yeni başlayanlar

What You’ll Create

Üç cümle ile çarpıcı bir animasyon motivasyonu alıntı, her biri farklı mektup kollage stilleri kullanıyor ve staggered animasyonları ortaya çıkardı.

Özellikler Öğreneceksiniz

• Hater Collage stilleri - Neon karolar, dergi kesouts, kağıt kesme etkileri
• Staggered animasyonlar - Bir tane ortaya çıkan mektuplar
• Background jeneratörleri - Hareketli güneşburst arka planları
• Keyframe animasyonları - Renk geçişleri ve kıvılcım etkileri

Adım 1: Set Up Blood

1. Open PinePaper Editor
2. canvas büyüklüğü düştü Ayakta
3. **Instagram Story (xx1920)

Adım 2: Hareketli Arkaplan

1. Scenes sekmesi doğru panelde
2. Plan Mode to Generator
3. Sunburst
4. Renkleri yapılandırın:
   • Renk 1: #FF6B6B (koral kırmızı)
   • Renk 2: #4ECDC4 (teal)
   • Renk 3: #FFE66D (yellow)
5. Set Ray Count: 16
6. Enable Animate ve Hız: 0,5
7. Click Generate

0Q

Adım 3: “DREAM BÜYÜK” Mektup Collage

1. Hater Collage düğmesine tıklayın araç çubuğu (veya L)
2. Tip: DREAM BÜYÜK
3. Tarzı yapılandırın:
   • Style: Tile
   • Test: Neon
   • Font Boyut: **72
   • Corner Radius: 8
   • Enable Shadow
4. Merkez alanı (x: 540, y: 750)

Kod eşdeğer:

const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540,
  y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

Adım 4: Staggered Animation to “DREAM BÜYÜK”

1. Kollage seçildikten sonra, Timeline Panel
2. Click Add Staggered Animation
3. Configure:
   • Etkisi: Pop In
   • Stagger Delay: 0.08s
   • Süre: 0.5s
   • Sequence: Linear (sağdan sağa sola)
   • Easing: HastalıkOut

Kod eşdeğer:

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

Adım 5: Create “WORK HARD” Letter Collage

1. Başka bir Mektup Collage oluşturun:

   • Text: WORK HARD
   • Style: Magazine (ransom not look)
   • Test: Magazine
   • Font Boyut: 60
   • Pozisyon: (540, 920)

2. Durmuş animasyonu ekleyin:

   • Etkisi: Fade Slide Up
   • Stagger Gecikme: **0.1
   • Sequence: Wave (giriş ortaya çıktı)

Kod eşdeğer:

const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540,
  y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

Adım 6: “STAY HUMBLE” Mektup Collage

1. Üçüncü Mektup Kolajı Oluşturun:

   • Text: STAY HUMBLE
   • Style: Paper Cut (3D gölge etkisi)
   • Font Boyut: 68
   • Pozisyon: (540, 1100)

2. Üzülen animasyonu ekleyin:

   • Etkisi: Pop In
   • Stagger Delay: 0.06s
   • Eşitlik: Center (ortadan dış)
   • Easing: Bounce

Kod eşdeğer:

const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540,
  y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

Adım 7: Dekoratif Acent Line ekleyin

1. Dekoratif bir bölme için bir dikdörtgen oluşturun:

   • Genişlik: 500, Boy: 8
   • Renk: Beyaz (#FFFFFF)
   • Cümlenin altındaki Pozisyon

2. Renk pulları için anahtar çerçeve animasyonu ekleyin:

Kod eşdeğer:

const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.0, properties: { fillColor: '#FFFFFF' } },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

Adım 8: Preview and Play

1. Basın Space animasyon oynamak için
2. Timeline 6 saniyelik bir döngü gösteriyor
3. Garggered’i izleyin:
   • “DREAM BÜYÜK” mektupta mektupta
   • “WORK HARD” bir dalga etkisi ile kaydırılır
   • “STAY HUMBLE” merkezden dışarı çıktı

Adım 9: Export

Instagram Story (Video)

1. Click Export düğmesine tıklayınız
2. WebM (recommended) veya MP4
3. Configure:
   • Süre: **6 saniye
   • Frame Rate: 30 fps
   • Kalite: Yüksek
4. Click Export and wait for download

Diğer Platformlar için

Tamam Code

İşte bu animasyonu yeniden oluşturmak için tam kod:

// Setup canvas
app.setCanvasSize('instagram-story');

// Animated sunburst background
app.executeGenerator('drawSunburst', {
  colors: ['#FF6B6B', '#4ECDC4', '#FFE66D'],
  rayCount: 16,
  animate: true,
  animationSpeed: 0.5
});

// "DREAM BIG" - Neon tile style
const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540, y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

// "WORK HARD" - Magazine ransom style
const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540, y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

// "STAY HUMBLE" - Paper cut style
const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540, y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

// Accent line with color animation
const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

// Play the 6-second loop
app.playKeyframeTimeline(6, true);

Hızlı Başlangıç: Şablonu kullanın

Sıfırdan inşa etmek yerine, önceden inşa edilmiş şablonu yükler:

1. Open Templates Panel (sağ tarafbar)
2. Kategori seçin: Social Media
3. Click Motivational Words
4. Tüm animasyonlarla şablon yükleri hazır

Mektup Collage Styles Referans

Stagger Sequence Desenleri

Pro Tips

Contrast konular - karanlık arka planlarda Işık metni (veya tersi) okunabilirlik için gereklidir.

Stagger zamanlama - 0.05-0.1 mektuplar arasında doğal hissediyor. Çok hızlı mekanik görünüyor.

Mix stilleri - Her cümle için farklı Letter Collage stilleri kullanarak görsel ilgi ekliyor.

**Bounce for vurgulamak için - bounce “STAY HUMBLE” üzerinde kiralama ekstra dikkat çekiyor.

Sonraki Adımlar

• Hater Collage Referansı – Tüm stil ve seçenekler
• Keyframe Editor - Özel zamanlama kontrolü
• Effects – kıvılcımları ekleyin ve vurgular
• Physics Animation – Gelişmiş kiralama etkiler