Tutorial: Opret et animeret bevægelses indlæg

Lær at skabe en iøjnefaldende animerede motiverende citat for Instagram historier ved hjælp af Letter Collage animationer.

• • Tid: * * 10 minutter
• • Problemer: * * Begynder

Hvad du vil oprette

En fantastisk animeret motiverende citat med tre sætninger, hver ved hjælp af forskellige bogstav collage stilarter og forskudt afslører animationer.

Funktioner du vil lære

• • • Brev Collage stilarter * * - Neon fliser, magasin udskæringer, papir cut effekter
• • • Stagged animationer * * - Breve vises en efter en
• • • Baggrundsgeneratorer * * - Animeret sunburst baggrunde
• • • Keyframe animationer * * - Farveovergange og gnistre effekter

Trin 1: Sæt Canvas op

1. Åbn PinePaper- editor
2. Klik på * * lærred størrelse dropdown * * i foden
3. Vælg * * Instagram Story (1080 × 1920) * *

Trin 2: Tilføj animeret baggrund

1. Klik på * * Scener * * fanen i højre panel
2. Sæt baggrundstilstand til * * Generator * *
3. Vælg * * Sunburst * *
4. Indstil farverne:
   • Farve 1: #FF6B6B (koralrød)
   • Farve 2: #4ECDC4 (teal)
   • Farve 3: #FFE66D (gul)
5. Sæt * * Ray Count * *: 16
6. Aktivér * * Animér * * og sæt Hastighed: 0.5
7. Klik * * Generér * *

Trin 3: Opret “DREAM BIG” Brev Collage

1. Klik på * * Brev Collage * * knappen i værktøjslinje (eller tryk på L)
2. Type: * * DREAM BIG * *
3. Indstil stilen:
   • Stil: * * Tile * *
   • Palette: * * Neon * *
   • Skrifttype Størrelse: * * 72 * *
   • Hjørneradius: 8
   • Aktivér Shadow
4. Position ved centertoparealet (x: 540, y: 750)

Kodenavn:

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

Trin 4: Tilføj Staggered Animation til “DREAM BIG”

1. Med collage valgt, åbne * * Timeline Panel * *
2. Klik * * Tilføj Staggered Animation * *
3. Indstil:
   • Effekt: * * Pop In * *
   • Forsinkelse af dolk: * * 0, 08s * *
   • Varighed: * * 0, 5 s * *
   • Sekvens: * * lineær * * (venstre mod højre)
   • Easing: * * easeOut * *

Kodenavn:

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

Trin 5: Opret “ARBEJDE HARD” Brev Collage

1. Opret en anden brev collage med:

   • Tekst: * * ARBEJDSMILJØ * *
   • Stil: * * Magazine * * (løsesum note look)
   • Palette: * * Magazin * *
   • Skrifttype Størrelse: * * 60 * *
   • Stilling: (540, 920)

2. Tilføj forskudt animation:

   • Effekt: * * Fade Slide Up * *
   • Staggerforsinkelse: * * 0, 1 s * *
   • Sekvens: * * Bølge * * (flydende afslører)

Kodenavn:

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

Trin 6: Opret “STAY HUMBLE” Brev Collage

1. Opret den tredje brevfarve:

   • Tekst: * * HOLD HUMBLE * *
   • Stil: * * Paper Cut * * (3D skyggeeffekt)
   • Skrifttype Størrelse: * * 68 * *
   • Stilling: (540, 1100)

2. Tilføj forskudt animation med bounce:

   • Effekt: * * Pop In * *
   • Staggerforsinkelse: * * 0, 06s * *
   • Sekvens: * * Center * * (afslører fra midten udad)
   • Leasing: * * Bounce * *

Kodenavn:

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

Trin 7: Tilføj Dekorative Accent Line

1. Opret et rektangel til en dekorativ deler:

   • Bredde: 500, Højde: 8
   • Farve: Hvid (#FFFFFF)
   • Position under sætningerne

2. Tilføj keyframe animation til farvepulsering:

Kodenavn:

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

Trin 8: Eksempel og spil

1. Tryk på Space for at spille animationen
2. Tidslinjen viser en 6-sekunders sløjfe
3. Se det spredte afslører:
   • “DREAM BIG” popper med bogstaver
   • “ARBEJDE HARD” glider op med en bølge effekt
   • “STAY HUMBLE” hopper fra centrum udad

Trin 9: Eksport

Til Instagram Story (Video)

1. Klik på * * Eksportér * * knappen
2. Vælg * * WebM * * (anbefalet) eller * * MP4 * *
3. Indstil:
   • Varighed: * * 6 sekunder * *
   • Frame Rate: * * 30 fps * *
   • Kvalitet: * * Høj * *
4. Klik på * * Eksportér * * og vent på download

Til andre platforme

Komplet kode

Her er den fulde kode til at genskabe denne animation:

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

Hurtig start: Brug skabelonen

I stedet for at bygge fra bunden, indlæse den præ-bygget skabelon:

1. Åbn * * Skabelonspanel * * (højre sidepanel)
2. Vælg kategori: * * Sociale medier * *
3. Klik * * Motivationskvadrat * *
4. Skabelonen belastninger med alle animationer klar

Reference for brevkolonner

Staggersekvensmønstre

Pro Tips

• • Kontrastspørgsmål * * - Lys tekst på mørke baggrunde (eller omvendt) er afgørende for læsbarhed.

• • Stagger timing * * - 0.05- 0.1s mellem bogstaver føles naturligt. For hurtigt ser mekanisk ud.

• • Mix stilarter * * - Brug forskellige Brev Collage stilarter for hver sætning tilføjer visuel interesse.

• • Bounce for vægt * * - bounce lempelse på “Stay Humble” tiltrækker ekstra opmærksomhed.

Næste skridt

• [Brev Collage Reference] (/features/letter-collage) - Alle stilarter og indstillinger
• [Keyframe Editor] (/features/keyframes) - Brugerdefineret tidskontrol
• [Effects] (/features/effects) - Tilføj gnister og højdepunkter
• [Fysik Animation] (/tutorials/physics-animation) - Avancerede lettelser effekter