Tutorial: Vytvořit animovaný motivační příspěvek

Naučte se vytvořit oční-chytání animované motivační citát pro Instagram příběhy pomocí letter collage animace.

Čas: 10 minut

• • Obtížnost: * * * Začátečník

Co vytvoříte

Ohromující animovaný motivační citát se třemi frázemi, každý pomocí různých písmen koláž styly a ohromující odhalit animace.

Funkce Naučíte se

• • • Letter Collage styles * * - Neon tiles, magazín cutouts, paper cut effects
• • • Staggered animations * * - Dopisy, které se objevují jeden po druhém
• • • Generátory pozadí * * - Animované sunburst pozadí
• • • Keyframe animations * * - Color transitions and Sparkle effects

Krok 1: Nastavit kanály

1. Otevřít editor PinePaper
2. Klikněte na * * plátno velikosti dropdown * * v footer
3. Vyberte * * Instagram Story (1080 × 1920) * *

Krok 2: Přidat animované pozadí

1. Klikněte na kartu * * Scény * * v pravém panelu
2. Nastavit režim pozadí na * * Generátor * *
3. Vyberte * * Sunburst * *
4. Nastavit barvy:
   • Barva 1: #FF6B6B (korálová červená)
   • Barva 2: #4ECDC4
   • Barva 3: #FFE66D (žlutá)
5. Set * * Ray Count * *: 16
6. Povolit * * Animate * * a nastavit rychlost: 0.5
7. • • Generovat * *

Name

Krok 3: Vytvořit “DREAM BIG” Koláž dopisů

1. Klikněte na tlačítko * * Koláč dopisů * * nástrojová lišta (nebo stiskněte L)
2. Typ: * * DreamAM BIG * *
3. Nastavit styl:
   • Styl: * * Tile * *
   • Paleta: * * Neon * *
   • Velikost písma: * * 72 * *
   • Rohový poloměr: 8
   • Povolit stín
4. Poloha v horní oblasti středu (x: 540, y: 750)

Ekvivalent kódu:

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

Krok 4: Přidat staggered animace do “DreamAM BIG”

1. Se zvolenou koláží otevřete * * Timeline Panel * *
2. Klikněte * * Přidat staggered animation * *
3. Nastavit:
   • Efekt: * * Pop In * *
   • • • 0.08s * *
   • Doba trvání: * * 0,5s * *
   • Sekvence: * * Lineární * * (zleva doprava)
   • Easing: * * easeOut * *

Ekvivalent kódu:

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

Krok 5: Vytvořit “Work Hard” Koláž

1. Vytvořit další Koláž dopisů s:

   • Text: * * Work Hard * *
   • Styl: * * Magazine * *
   • Paleta: * * Magazine * *
   • Velikost písma: * * 60 * *
   • Funkce: (540, 920)

2. Přidat rozvrácenou animaci:

   • Efekt: * * Fade Slide Up * *
   • • • 0.1 s * *
   • Sekvence: * * Wave * * (průtok odhalí)

Ekvivalent kódu:

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

Krok 6: Vytvořit “STAY HUMBLE” Koláč dopisů

1. Vytvořit třetí písmeno koláž:

   • Text: * * STAY HUMBLE * *
   • Styl: * * Papírový střih * * (3D stínový efekt)
   • Velikost písma: * * 68 * *
   • Funkce: (540, 1100)

2. Přidat rozvrácenou animaci s odskokem:

   • Efekt: * * Pop In * *
   • Zpoždění staggeru: * * 0.06s * *
   • Sekvence: * * Centrum * * (ukazuje od středu ven)
   • Easing: * * Bounce * *

Ekvivalent kódu:

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

Krok 7: Přidat dekorativní přímku akcentu

1. Vytvořit obdélník pro dekorativní dělič:

   • Šířka: 500, výška: 8
   • Barva: bílá (#FFFFFF)
   • Pozice pod frázemi

2. Přidat animaci klávesy pro barevnou pulzaci:

Ekvivalent kódu:

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

Krok 8: Náhled a hra

1. Stiskněte Space pro přehrání animace
2. Časová osa ukazuje 6sekundovou smyčku
3. Podívejte se na rozvrácené odhalení:
   • “DreamAM BIG” přichází v dopise
   • “Work Hard” sklouzne s vlnovým efektem
   • “STAY HUMBLE” skáče z centra ven

Krok 9: Export

Pro Instagram příběh (Video)

1. Klikněte na tlačítko Export * *
2. Vyberte * * WebM * * (doporučeno) nebo * * MP4 * *
3. Nastavit:
   • Doba trvání: * * 6 sekund * *
   • Rychlost snímku: * * 30 fps * *
   • Kvalita: * * Vysoká * *
4. Klikněte na * * Export * * a počkejte na stažení

Pro ostatní platformy

Kompletní kód

Zde je celý kód k vytvoření animace:

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

Rychlý start: použijte šablonu

Místo toho, aby budova od nuly, načíst pre- postavené šablony:

1. Open * * Šablona šablon * * (pravá strana)
2. Vyberte kategorii: * * Sociální média * *
3. • • Motivační citát * *
4. Šablona načítá všechny animace připravené

Reference na styl kolébky

Vzorky sekvence staggerů

Pro tipy

• • Záležitosti kontrastu * * - Světlý text na tmavém pozadí (nebo naopak) je nezbytný pro čitelnost.

• • Načasování staggeru * * - 0.05-0.1s mezi písmeny je přirozené. Příliš rychle vypadá mechanicky.

• • Mix styles * * - Použití různých stylů letter collage pro každou frázi přidává vizuální zájem.

• • Bounce pro důraz * * - bounce uvolňování na “STAY HUMBLE” přitahuje zvláštní pozornost.

Další kroky

• [Reference na koláž] (/features/letter-collage) - Všechny styly a možnosti
• [Editor klávesnice] (/features/keyframes) - Vlastní řízení času
• [Effects] (/features/effects) - Přidat jiskry a zvýraznění
• [Fyzická animace] (/tutorials/physics-animation) - Pokročilé uvolňující efekty