Opas: Luo Animated Motivotional Post

Opi luomaan silmää vangitseva animoitu motivoiva lainaus Instagram Stories käyttäen Letter Collage animations.

Aika: 10 minuuttia Vaikeus: Aloittelija

Mitä sinä luot

Upea animoitu motivoiva lainaus kolmella lauseella, joista jokainen käyttää eri kirjainkollage tyylejä ja porrastettu paljastaa animaatioita.

Ominaisuudet Opit

• Letter Collage tyylejä Neon laatat, aikakauslehdet, paperi leikkaus vaikutuksia
• Taggeroidut animaatiot Kirjaimet ilmestyvät yksitellen
• Takageneraattorit …
• Keyframe-animaatiot Värimuutokset ja säkenöivät vaikutukset

Vaihe 1: Aseta kangas

1. Avaa PinePaper-muokkain
2. Napsauta alatunnisteen **-kokoa
3. Valitse **Instagram Story (1080×1920)

Vaihe 2: Lisää animoitu tausta

1. Klikkaa Skens-välilehteä oikeassa paneelissa
2. Aseta taustatila **generatoriin
3. Valitse Sunburst
4. Määrittele värit:
   • Väri 1: #FF6B6B (kuoren punainen)
   • Väri 2: #4ECDC4 (vihreä)
   • Väri 3: #FFE66D (keltainen)
5. Set Ray Count: 16
6. Ota käyttöön Animate ja aseta nopeus: 0,5
7. Klikkaa **Generaatti

Vaihe 3: Luo “DREAM BIG” Kirje Collage

1. Klikkaa Letter Collage -painiketta työkalupalkki (tai paina L)
2. Tyyppi: **DREAM BIG
3. Aseta tyyli:
   • Tyyli:
   • Paletti:
   • Kirjasinkoko: 72
   • Kulma Säde: 8
   • Ota varjo käyttöön
4. Asema keskellä-yläpinta-alaa (x: 540, y: 750)

Koodi

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

Vaihe 4: Lisää siroteltu animaatio “DREAM BIG”

1. Kun kollaasi on valittu, avaa **Aikarivipaneeli
2. Klikkaa **Lisää pirstaleinen animaatio
3. Asetukset:
   • Vaikutus: Pop in
   • Viivästyminen: **0,08s
   • Kesto: 0,5s
   • Sekvenssi: Linear (vasemmalta oikealle)
   • Helpotus:

Koodi

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

Vaihe 5: Luo “WORK HARD” kirjekollaasi

1. Luo toinen kirjekollage:

   • Teksti:
   • Tyyli: Magatsiini (lunsom note look)
   • Paletti: Magatsiini
   • Kirjasinkoko: 60
   • Sijainti: (540, 920)

2. Lisää porrastettu animaatio:

   • Vaikutus: Hävittää liukumista
   • Viivästyminen: 0,1s
   • Sekvenssi: Wave (virtaava paljastus)

Koodi

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

Vaihe 6: Luo “STAY HUMBLE” -kirjainkollaasi

1. Luo kolmas kirjekollage:

   • Teksti:
   • Tyyli: Paperileikkaus (3D varjovaikutus)
   • Kirjasinkoko: 68
   • Asema: (540, 110)

2. Lisää porrastettu animaatio pomppimalla:

   • Vaikutus: Pop in
   • Viive: **0,06s
   • Sekvenssi: Center (paljastaa keskeltä ulospäin)
   • Helpotus:

Koodi

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

Vaihe 7: Lisää koristeellinen aksenttiviiva

1. Luo suorakulmio koristejakajalle:

   • Leveys: 500, Korkeus: 8
   • Väri: valkoinen (#FFFFFF)
   • Sijainti lausekkeiden alapuolella

2. Lisää näppäinrungon animaatio väripulsing:

Koodi

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

Vaihe 8: Esikatselu ja toisto

1. Paina Space soittaaksesi animaatiota
2. Aikajana näyttää 6 sekunnin silmukka
3. Katsokaa, miten hoikka paljastuu:
   • “DREAM BIG” ilmestyy kirjaimellisesti
   • “Vaarallinen” liukuu aaltoefektillä
   • “STAY HUMBLE” pomppii keskeltä ulospäin

Vaihe 9: Vie

Instagram Story (Video)

1. Napsauta Export-painiketta
2. Valitse WebM (suositeltu) tai **MP4
3. Asetukset:
   • Kesto: 6 sekuntia
   • Runkonopeus: 30 fps
   • Laatu: korkea
4. Klikkaa Export ja odota lataamista

Muut alustat

Täydellinen koodi

Tässä on koko koodi luoda tämä animaatio:

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

Nopea aloitus: Käytä mallia

Sen sijaan, että rakennus tyhjästä, lataa valmiiksi rakennettu malli:

1. Open Templates Panel (oikea sivupalkki)
2. Valitse kategoria: ** Sosiaalinen media
3. Klikkaa ** Motivational quote
4. Malli kuormia kaikki animaatiot valmiina

Kirjain Collage Styles -viittaus

Stagger-sarjan kuviot

Pro Vinkkejä

Kontrastiasiat … Valoteksti tummilla taustoilla (tai päinvastoin) on luettavuuden edellytys.

Stagger ajoitus …0.05-1s kirjainten välissä tuntuu luonnolliselta. Liian nopea näyttää mekaaniselta.

Mix styles … …

Bounce ja paino .

Seuraavat vaiheet

• Letter Collage Reference
• Keyframe Editor …
• Effects
• Physics Animation