Tutorial: Creați un post motivațional animat

Învață să creezi un citat motivațional animat pentru animațiile Instagram folosind Collage Letter.

Time: 10 minute Dificilitatea: Începutul

Ce vei crea

Un uimitor citat motivaţional animat cu trei fraze, fiecare folosind diferite stiluri de colaj de litere şi şovăind animaţii.

Caracteristici Veți învăța

• Leter Collage styles
• Animaţii bruiate
• Generatoare de fundal
• Animații Keyframe

Pasul 1: Configurați Canvas

1. Deschide editorul PinePaper
2. Faceţi clic pe canvas dimensiunea picătură în subsol
3. Selectaţi Povestea Instagram (1080×1920)

Pasul 2: Adaugă fundal animat

1. Faceți clic pe fila Scenes din panoul din dreapta
2. Setează modul de fundal la Generator
3. Selectează Sunburst
4. Configurează culorile:
   • Culoare 1: #FF6B6B (roșu coral)
   • Culoare 2: #4ECDC4 (taie)
   • Culoare 3: #FFE66D (galben)
5. Set Ray Count: 16
6. Activează Animează și setează Viteza: 0,5
7. Click Generat

Pasul 3: Creați colaj de scrisoare “DREAM BIG”

1. Faceți clic pe butonul Letter Collage în bară de unelte (sau apăsaţi L)
2. Tip: DREAM BIG
3. Configurează stilul:
   • Stil: Tile
   • Paleta: Neon
   • Mărime font: 72
   • Corner Radius: 8
   • Activează umbra
4. Poziția în zona de centru-top (x: 540, y: 750)

Cod echivalent:

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

Pasul 4: Adăugați animație stagnată la “DREAM BIG”

1. Cu colajul selectat, deschideți panoul de timp **
2. Click Adăugați animație cu stagnare
3. Configurează:
   • Efect: Pop In
   • Falsificare: 0,08s
   • Durata: 0,5s
   • Secvență: Linear (stânga la dreapta)
   • Uşurel, uşurel

Cod echivalent:

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

Pasul 5: Creați colaj scrisoare “WORK HARD”

1. Creează un alt colaj de scrisori cu:

   • Text: WORK HARD
   • Stil: Magazine (aspect de notă de răscumpărare)
   • Paleta: Magazine
   • Mărime font: 60
   • Poziția: (540, 920)

2. Adaugă animație eşuată:

   • Efect: Fade Slide Up
   • Stagger Întârziere: 0.1s
   • Secvenţa: Wave (curgerea revelaţiei)

Cod echivalent:

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

Pasul 6: Creați colaj de scrisoare “STAY HUMBLE”

1. Creează al treilea colaj de litere:

   • Traducerea şi adaptarea:
   • Stil: Paper Cut (efect de umbră 3D)
   • Mărime font: **68
   • Poziția: (540, 1100)

2. Adăugați animație cu clanță:

   • Efect: Pop In
   • Falsificare: 0,06s
   • Secvență: Center (revelează din mijloc spre exterior)
   • Ușor: Bounce

Cod echivalent:

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

Pasul 7: Adăugaţi linia de accent decorative

1. Creați un dreptunghi pentru un separator decorativ:

   • Lățime: 500, înălțime: 8
   • Culoare: alb (#FFFFFF)
   • Poziția sub fraze

2. Adaugă animație keyframe pentru pulsare color:

Cod echivalent:

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

Pasul 8: Previzualizare și redare

1. Apăsați Space pentru a reda animația
2. Cronologia arată o buclă de 6 secunde
3. Uita-te la clatinat dezvăluie:
   • “DREAM BIG” apare în scrisoare prin scrisoare
   • “WORK HARD” alunecă cu un efect de undă
   • “STAI HUMBLE” sare din centru spre exterior

Pasul 9: Export

Pentru Instagram Story (Video)

1. Apasă butonul Export
2. Selectaţi WebM (recomandat) sau MP4
3. Configurează:
   • Durata: 6 secunde
   • Rata cadrului: 30 fps
   • Calitate: mare
4. Click Export și așteptați descărcarea

Pentru alte platforme

Cod complet

Iată codul complet pentru a recrea această animație:

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

Start rapid: Utilizați șablonul

În loc de a construi de la zero, încărcați șablonul pre-construit:

1. Deschide Templates Panel (bară laterală dreaptă)
2. Alegeți categoria: Media socială
3. Click Citat motivational
4. Șablonul se încarcă cu toate animațiile pregătite

Referință Style Collage de scrisoare

Modele de secvenţă de stagnare

Sfaturi pro

Contrast matters .

Sincronizare Stagger Prea repede arată mecanic.

Stiluri de amestec .

Bunce for accente .

Următoarele etape

• Referință în Collage
• Keyframe Editor
• Efecte
• Animație de fizică