Tutorial: Tworzenie animowanego postu motywacyjnego

Naucz się tworzyć animowany cytat motywacyjny dla Opowieści Instagram za pomocą animacji Collage List.

Czas: 10 minut

• • Trudność: * * Początkujący

Co stworzysz

Oszałamiający animowany motywacyjny cytat z trzema wyrazami, każdy przy użyciu różnych stylów kolażu literowego i rozłożone animacje ujawniają.

Cechy Nauczysz się

• • • Letter Collage styles * * - Płytki neonowe, wycinki magazynowe, efekty cięcia papieru
• • • Staggered animations * * - Listy pojawiające się jeden po drugim
• • • Generatory tła * * - Animowane tła opalania
• • • Keyframe animations * * - Color transitions and sparkle effects

Krok 1: Ustawienie Canvas

1. Otwórz edytor PinePaper
2. Kliknij * * rozmiar płótna spada * * w stopce
3. Wybierz * * Historia Instagramu (1080 × 1920) * *

Krok 2: Dodaj animowane tło

1. Kliknij zakładkę * * Sceny * * w prawym panelu
2. Ustaw tryb tła na * * Generator * *
3. Wybierz * * Sunburst * *
4. Konfiguracja kolorów:
   • Kolor 1: #FF6B6B (czerwony koral)
   • Kolor 2: #4ECDC4 (herbata)
   • Kolor 3: #FFE66D (żółty)
5. Set * * Ray Count * *: 16
6. Włącz * * Animate * * i ustaw prędkość: 0.5
7. Kliknij * * Generate * *

Krok 3: Tworzenie “DREAM BIG” Collage list

1. Kliknij przycisk * * Collage liter * * paska narzędzi (lub naciśnij L)
2. Typ: * * DREAM BIG * *
3. Konfiguracja stylu:
   • Styl: * * Tile * *
   • Paleta:
   • Rozmiar czcionki: * * 72 * *
   • Promień rogu: 8
   • Włącz cień
4. Położenie na środkowej powierzchni górnej (x: 540, y: 750)

Ekwiwalent kodu:

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

Krok 4: Dodaj animację “DREAM BIG”

1. Po wybraniu kolażu otwórz panel czasowy * *
2. Kliknij * * Dodaj animację staggered * *
3. Konfiguracja:
   • Efekt: * * Pop In * *
   • Opóźnienie staggera: * * 0,08s * *
   • Czas trwania: * * 0,5 s * *
   • Sekwencja: * * Liniowy * * (od lewej do prawej)
   • Easing: * * easeOut * *

Ekwiwalent kodu:

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

Krok 5: Tworzenie “TWARD PRAC” Collage list

1. Utwórz kolejny Collage list z:

   • Tekst:
   • Styl: * * Magazine * * (list okupu)
   • Paleta: * * Magazine * *
   • Rozmiar czcionki: * * 60 * *
   • Pozycja: (540, 920)

2. Dodaj animację rozłożoną:

   • Efekt: * * Fade Slide Up * *
   • Opóźnienie staggera: * * 0,1s * *
   • Sekwencja:

Ekwiwalent kodu:

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: Utwórz “STAY HUMBLE” Collage list

1. Utwórz trzeci Kolaż Liter:

   • Tekst:
   • Styl: * * Paper Cut * * (efekt cienia 3D)
   • Rozmiar czcionki: * * 68 * *
   • Pozycja: (540, 1100)

2. Dodaj rozłożone animacje z odbiciem:

   • Efekt: * * Pop In * *
   • Opóźnienie staggera: * * 0,06s * *
   • Sekwencja: * * Centrum * * (ujawnia się od środka na zewnątrz)
   • Easing: * * Bounce * *

Ekwiwalent kodu:

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: Dodaj dekoracyjną linię accent

1. Stwórz prostokąt dla rozdzielacza dekoracyjnego:

   • Szerokość: 500, wysokość: 8
   • Kolor: biały (#FFFFFF)
   • Położenie poniżej wyrażeń

2. Dodaj animację klawiszy do pulsowania kolorów:

Ekwiwalent kodu:

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: Podgląd i odtwarzanie

1. Naciśnij Space, aby odtworzyć animację
2. Czas pokazuje 6- sekundową pętlę
3. Oglądaj rozłożone pokazuje:
   • “DREAM BIG” wyskakuje listem po literze
   • “WORK HARD” zsuwa się z efektem fali
   • “STAY HUMBLE” odbija się od środka na zewnątrz

Krok 9: Wywóz

Dla Instagram Story (Video)

1. Kliknij * * Eksportuj * * przycisk
2. Wybierz * * WebM * * (zalecane) lub * * MP4 * *
3. Konfiguracja:
   • Czas trwania: * * 6 sekund * *
   • Ramka: * * 30 fps * *
   • Jakość: * * High * *
4. Kliknij * * Eksportuj * * i czekaj na pobranie

Dla innych platform

Pełny kod

Oto pełny kod do odtworzenia tej animacji:

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

Szybki start: Użyj szablonu

Zamiast budować od zera, załaduj wstępnie zbudowany szablon:

1. Otwarte * * Panel szablonów * * (prawy pasek boczny)
2. Wybierz kategorię: * * Social Media * *
3. Kliknij * * Motivational Quote * *
4. Szablon ładuje wszystkie animacje gotowe

List Kolage Styles Reference

Wzory sekwencji staggera

Pro Porady

• • Kontrast ma znaczenie * * - Lekki tekst na ciemnych tle (lub odwrotnie) jest niezbędny dla czytelności.

• • Stagger timing * * - 0.05- 0.1s między listami wydaje się naturalne. Za szybko wygląda mechanicznie.

• • Style mix * * - Korzystanie z różnych stylów Collage list dla każdego wyrażenia dodaje zainteresowania wizualne.

• • Bounce for presigment * * - bounce leasing on “STAY HUMBLE” zwraca uwagę.

Kolejne kroki

• [Liter Collage Reference] (/features/letter-collage) - Wszystkie style i opcje
• [Keyframe Editor] (/features/keyframes) - Własne sterowanie czasem
• [Efekty] (/features/effects) - Dodaj iskry i pasemka
• [Animacja Fizyczna] (/tutorials/physics-animation) - Zaawansowane efekty rozluźnienia