Tutorial: Gumawa ng Animadong Momental Post

8 min read

Matutong lumikha ng isang eye-catching respiritwal quote para sa Instagram Stories gamit ang Letter Collage animations.

Oras: 10 minuto Difficulty: Nagsimula

Kung Ano ang Iyong Gagawin

Isang kahanga - hangang masiglang pampasiglang sinipi na may tatlong parirala, ang bawat isa ay gumagamit ng iba’t ibang istilo ng pagsulat at nakalilitong nagsisiwalat ng mga animation.

Animated respiratoryal quote na may mga epektong

Mga Katangiang Matututuhan Mo

  • ** Letter Collage mga istilo* — Neon tisa, mga cutout ng magasin, mga epekto ng papel
  • *Staggered animation — Isa - isang lumitaw ang mga Liham
  • Mga generator — Maaraw na mga pinagmulan
  • Keyframe animations — Color transitions at mga epekto ng kislap

Hakbang 1: Magtayo ng mga Kava

  1. Open PinePaper Editor
  2. Hinango ang canvas na sukat na dropdown* sa footer
  3. Pumili Instagram Story (1080Ă—1920)
Canvas size selection
Select Instagram Story sukat

Hakbang 2: Magdagdag ng Masasayang Pinagmulan

  1. Hinango ang Scenes task sa kanang panel
  2. Itakda ang Larawan Mode sa Generador*
  3. Pumili Sunburst**
  4. Pagtugmain ang mga kulay:
    • Kulay 1: #FF6B6B (coral pula)
    • Kulay 2: #4ECDC4 (teal)
    • Kulay 3: #FFE66D (yellow)
  5. Itakda Ray Konde: 16
  6. Nakatakda Anima at nakatakdang Bilis: 0.5
  7. Click Generate
Sunburst background
Animated sunburst background na may matitingkad na kulay

Hakbang 3: Lumikha ng “DREAM BIG” Letter Collage

  1. Hinango ang Letter Collage buton sa loob ng toolbar (o press L)
  2. Uri: DREAM BIG*
  3. Pagtugmain ang istilo:
    • Istilo: Tile*
    • Palette: ******
    • Fint Size: 72****
    • Corner Radius: 8
    • Kawili - wiling Anino
  4. Posisyon sa sentro-top area (x: 540, y: 750)

Katumbas ng Kodigo:

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

Hakbang 4: Idagdag ang Staggered Animation sa “DREAM BIG”

  1. Kasama ang collage na napili, buksan ang Timeline Panel*
  2. Click Ad Staggered Animation
  3. Konfigure:
    • Epekto: Pop In*
    • Stagger Decree: 0.08s*
    • Gaano Katagal: 0.5*
    • Sequence: *Linear (kaliwa pakanan)
    • Pag - aani: ease Mula*

Katumbas ng Kodigo:

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});
Letter collage animation
Letters Apple na may pasuray - suray na pop-in effect

Hakbang 5: Lumikha ng “WORK HARD” Letter Collage

  1. Gumawa ng Isa pang Liham:

    • Teksto: WORK HARD
    • Style: **Magazine (Tingin)
    • Palette: ******
    • Fint Size: 60**
    • Posisyon: (540, 920)

  2. Idagdag ang pasuray - suray na animasyon:

    • Epekto: Fade Slide Up
    • Stagger Dylex: 0.1s*
    • Sequence: *Wave (nagsisiwalat)

Katumbas ng Kodigo:

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

Hakbang 6: Lumikha ng “STAY HUMBLE” Letter Collage

  1. Gumawa ng ikatlong Liham:

    • Text: STATIL****
    • Istilo: Paper Cut (3D aninong epekto)
    • Fint Size: 68****
    • Posisyon: (540, 1100)

  2. Magdagdag ng pasuray - suray na animation:

    • Epekto: Pop In*
    • Stagger Decree: 0.06s*
    • Sequence: *Center (mga labĂ­ mula sa gitnang labas)
    • Pag-iingles: **Bounce

Katumbas ng Kodigo:

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'
});
All phrases visible
Lahat ng tatlong parirala na may iba't ibang istilo

Hakbang 7: Magdagdag ng Pagpapalamuting Linya

  1. Gumawa ng isang parihaba para sa isang pandekorasyong dibisyon:

    • Width: 500, Height: 8
    • Kulay: Puti (#FFFFFF)
    • Ipuwesto sa ibaba ng mga parirala

  2. Idagdag ang keyframe animation para sa color populsing:

Katumbas ng Kodigo:

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

Hakbang 8: Pagmasdan at Paglaro

  1. Pigain ang Space upang gampanan ang animation
  2. Ang Timeline ay nagpapakita ng 6- second loop
  3. Ang nagmamasid ay nagsisiwalat:
    • “DREAM BIG” mga pop sa pamamagitan ng titik
    • “WORK HARD” dumadausdos na may epektong alon
    • Ang “STAY HUMBLE” ay umiikutan mula sa gitnang panlabas

Hakbang 9: Paglabas

Para sa Kuwentong Instagram (Video)

  1. Click Export button
  2. Pumili WebM (isinaayos) o POPG1X**
  3. Konfigure:
    • Gaano Katagal: 6 segundo
    • Frame Bilang: 30 fps*
    • Katangian: Mataas**
  4. Click Export at maghintay ng download

Para sa Iba Pang mga Platform

Plataporma Kamag - anak Mga Noble
Kuwentong Instagram MP4/PWebM 1080Ă—1920, up to 15s
Istagram Post MP4 Palitan ng canvas hanggang 1080Ă—1080
TikTok MP4 1080Ă—1920, kagaya ng Kuwento
Twitter/ X GIF Mas mahusay na suporta sa auto-play

Buong Kodigo

Narito ang buong kodigo upang muling likhain ang animation na ito:

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

Mabilis na Pasimula: Gamitin ang template

Sa halip na magtayo mula sa gasgas, ikarga ang pre-build template:

  1. Buksan ** template Panel* (kanan)
  2. Pumili ng kategorya: Social Media
  3. Click *Motivational Qute
  4. Nakahanda na ang template

Binabanggit ng mga Istilo ng Liham

Istilo Tingnan Pinakamabuti Para sa
Tile Mga wordle/Bagyong bloke Mga laro, mga salitang puzzle
Magasin Naputol ang salaping papel na pantubos Kahiya - hiya, artistiko
Pagputol ng Papel 3D anino ng lalim Kahanga - hangang Kagandahan
Iprito Mga origami crease Makabago, dimensiyon
Nagtapos Kulay-shifting na mga titik Vibrant, moderno

Napakagandang Halimbawa ng Pag - aalinlangan

Katanungan Epekto
linear Kaliwa pakanan
reverse Kanan pakaliwa
center Gitnang panlabas
random Utos ng Random
wave Oras ng Sine wave

Mga Mungkahi

Contrast mga bagay - bagay — Ang magaang na teksto tungkol sa madilim na pinagmulan (o kabaligtaran nito) ay mahalaga sa pagiging marunong bumasa.

Stagger tiyempo — 0.05-0.1 sa pagitan ng mga titik ay nakadarama ng natural. Parang mekanikal ang sobrang bilis.

Ang mga istilong — Paggamit ng iba’t ibang istilong Letter Collage para sa bawat parirala ay nagdaragdag ng interes sa paningin.

Bounce para sa diin — The bounce reving on “STAY HUMBLE” ay kumukuha ng dagdag na atensiyon.

Susunod na mga Hakbang