Tutorial: Animated Motivational Post létrehozása

Tanulj meg létrehozni egy szemet fogó animációs motivációs idézetet az Instagram történetek segítségével Levél Collage animációk.

• • Time: * * 10 perc
• • Nehézség: * * kezdők

What You 'll Create

Egy lenyűgöző animációs idézet három mondattal, mindegyik különböző betűs kollázs stílusok és szakaszos felfedi animációk.

Jellemzők Megtanulod

• • • Levél kollázs stílus * * - Neon csempe, magazin vágások, papír vágás effektek
• • • Stagfed animations * * - Levelek jelennek meg egyenként
• • • Háttér generátorok * * - Animated sunburst backgrounds
• • • Keyframe animációk * * - Színátmenet és csillogó effektek

1. lépés: Állítsuk fel a kannákat

1. A PinePaper szerkesztő megnyitása
2. Kattintson a * * vászon mérete csepp * * a lábléc
3. Select * * Instagram Story (1080 × 1920) * *

Lépés: Animációs háttér hozzáadása

1. Kattintson a * * képernyők * * fülre a jobb panelben
2. Háttér mód beállítása * * Generátorra * *
3. Válasszon * * Sunburst * *
4. A színek beállítása:
   • 1. szín: #FF6B6B (korallvörös)
   • 2. szín: #4ECDC4 (teál)
   • 3. szín: #FFE66D (sárga)
5. Set * * Ray Gount * *: 16
6. Enable * * Animate * * és set Speed: 0.5
7. Click * * Generate * *

3. lépés: “DREAM BIG” betű összecsapása

1. Kattintson a * * levél kollázs * * gombra a eszköztár (vagy nyomja meg az L gombot)
2. Típus: * * DREAM BIG * *
3. A stílus beállítása:
   • Style: * * Tile * *
   • Neon
   • Betűméret: * * 72 * *
   • Saroksugárzás: 8
   • Árnyék engedélyezése
4. Pozíció középen (x: 540, y: 750)

Kódegyenérték:

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

4. lépés: Stagned Animation hozzáadása a “DREAM BIG” -hez

1. A kiválasztott kollázzsal nyissa meg a * * Timeline Panelt * *
2. Click * * Add Stagfed Animation * *
3. Beállítás:
   • Hatása: * * Pop In * *
   • Stager Delay: * * 0,08s * *
   • Időtartam: * * 0, 5 s * *
   • Sorozat: * * Linear * * (balról jobbra)
   • • • easeOut * *

Kódegyenérték:

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

5. lépés: “MUNKAHARD” betű összeütközése

1. Hozzon létre egy másik levél összeütközést:

   • Szöveg: * * WORK HARD * *
   • Stílus: * * Magazine * * (váltságdíj jegyzet look)
   • Palette: * * Magazine * *
   • Betűméret: * * 60 * *
   • Helyzet: 540, 920

2. Szakaszos animáció hozzáadása:

   • Hatás: * * Fade Slide Up * *
   • Stager Delay: * * 0, 1 s * *
   • Sorozat: * * Hullám * *

Kódegyenérték:

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

Lépés: “STAY HUMBLE” betű összecsapása

1. Hozzon létre a harmadik levél összecsapása:

   • Szöveg: * * STAY HUMBLE * *
   • Stílus: * * Paper Cut * * (3D árnyék hatás)
   • Betűméret: * * 68 * *
   • Beosztás: (540, 1100)

2. Szakaszos animáció hozzáadása ugrással:

   • Hatása: * * Pop In * *
   • Stager Delay: * * 0,06s * *
   • Sorozat: * * Középen * * (a külseje közepéről kiderül)
   • Easing: * * Bounce * *

Kódegyenérték:

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

7. lépés: Dekoratív akciós vonal hozzáadása

1. Egy dekoratív elválasztó téglalap létrehozása:

   • Szélesség: 500, magasság: 8
   • Szín: fehér (#FFFFFF)
   • A mondatok alatti álláspont

2. Keyframe animáció hozzáadása a színpulzáláshoz:

Kódegyenérték:

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

8. lépés: Előnézet és játék

1. Az animáció lejátszásához nyomja meg az Space gombot
2. The Timeline show a 6- second loop
3. Nézd meg, hogy a szakaszos felfedi:
   • “DREAM BIG” levélben jelenik meg
   • A “MUNKAHARD” hullámeffektus
   • “STAY HUMBLE” ugrál a központból kifelé

9. lépés: Export

Instagram Story (Video)

1. Kattintson * * Export * * gombra
2. • • WebM * * (ajánlott) vagy * * MP4 * *
3. Beállítás:
   • Időtartam: * * 6 másodperc * *
   • Keretarány: * * 30 fps * *
   • Minőség: * * Magas * *
4. Kattintson * * Export * * és várjon a letöltésre

Más platformokhoz

Teljes kód

Itt a teljes kód az animációhoz:

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

Gyors start: használja a sablont

A semmiből történő építkezés helyett töltsük be az előre épített sablont:

1. Nyitott * * sablonok panel * * (jobb oldalsó)
2. Válasszon kategóriát: * * * Social Media * *
3. Kattintson * * Motivációs idézés * *
4. A sablon betöltése minden animáció kész

Levél Collage Styles hivatkozás

Stager szekvencia minták

Pro Tippek

• • Contrast matters * * - A világos szöveg sötét háttérrel (vagy fordítva) elengedhetetlen az olvashatósághoz.

• • Stagger timp * * - 0.05- 0.1s betűk között természetes. Túl gyorsnak tűnik.

• • Mix stílusok * * - A különböző betűs kollázs stílusok minden kifejezéshez hozzáadott vizuális érdeklődés.

• • Bounce for hangsúly * * - Az bounce lazítás a “STAY HUMBLE” felhívja a figyelmet.

Következő lépések

• [Level Collage Reference] (/features/letter-collage) - Minden stílus és lehetőség
• [Keyframe Editor] (/features/keyframes) - Egyéni időzítő
• [Hatások] (/features/effects)
• [Fizikai animáció] (/tutorials/physics-animation) - Advanced easy effects