Підручник: Створення анімованих мотиваційних повідомлень

Дізнайтеся, щоб створити мотивацію мультфільму для історії Instagram за допомогою анімацій Letter Collage.

Час:* 10 хвилин Difficulty:* Новачок

Що ви будете створювати

Дивовижна анімаційна мотиваційна цитата з трьома фразами, кожен з яких використовує різні стилі колажу літери та шахові показання анімацій.

ХККСНУМКСК ХККСНУМКСК ХККСНУМКСК ХККСНУМКСК ХККСНУМКСК ХККСНУМКСК

Особливості Ви дізнаєтеся

• Latter Collage styles* — плитка Neon, журнал вирізів, ефект зрізу паперу
• Смічені анімації* — Листи, що з’являються один за одним
• Background генератори* — Анімовані фони сонячних батарей
• Keyframe анімація — Кольорові переходи та ігристі ефекти

Крок 1: Встановити полотно

1. Open PinePaper редактор
2. Клацніть по спаду розміру*** в нижній частині
3. Виберіть *Instagram Story (1080×1920)

ХККСНУМКСК ХККСНУМКСК

Крок 2: Додати анімований фон

1. Натисніть кнопку Scenes в правій панелі
2. Настроювання фонового режиму до****
3. Виберіть Sunburst*
4. Налаштування кольорів:
   • Колір 1: #FF6B6B (корал червоний)
   • Колір 2: #4ECDC4 (teal)
   • Колір 3: #FFE66D (жовтий)
5. Set Ray Count: 16
6. Увімкнути Animate* і встановити Speed: 0.5
7. Клацніть Generate

ХККСНУМКСК ХККСНУМКСК

Крок 3: Створення “DREAM BIG” Лист колаж

1. Клацніть the Letter Collage* кнопка в (або прес L)
2. Тип: DREAM BIG
3. Налаштування стилю:
   • Модель: Tile
   • Навігація
   • Розмір шрифту: 72*
   • Кутовий Радіус: 8
   • Увімкнути тінь
4. Посада в центральній частині (х: 540, л: 750)

Код еквівалентний:

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

Крок 4: Додати Переміщення анімації до “DREAM BIG”

1. З вибраним колажу, відкрийте панель Timeline
2. Клацніть Add Staggered Анімація
3. Налаштування:
   • Ефект: Pop В*
   • Stagger Delay: 0.08s
   • Тривалість: 0.5s
   • Sequence: Linear (ліво праворуч)
   • EaseOut*********************************************************************************************************************************************************************************************************************************************************

Код еквівалентний:

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

ХККСНУМКСК ХККСНУМКСК

Крок 5: Створіть “WORK HARD” листовий колаж

1. Створіть ще один листовий колаж з:

   • Текст: WORK HARD*
   • Стиль: Magazine
   • Магазину
   • Розмір файлу: 60*
   • Посада: (540, 920)

2. Додати зашифровану анімацію:

   • Ефект:*****
   • Штамп Delay: 0.1s
   • Sequence: Wave (відкриття)

Код еквівалентний:

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

Крок 6: Створіть “STAY HUMBLE” листовий колаж

1. Створення третього листового колажу:

   • Текст: STAY HUMBLE
   • Стиль: Папер Cut (3D ефект тіні)
   • Розмір файлу: 68*
   • Посада: (540, 1100)

2. Додати зашифровану анімацію з відмовою:

   • Ефект: Pop В*
   • Штамп Delay: 0.06s
   • Sequence: Центр (рекції з середини)
   • Bounce**********************************************************************************************************************************************************************************************************************************************************

Код еквівалентний:

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

ХККСНУМКСК ХККСНУМКСК ХККСНУМКС QAll три фрази з різними стилями ХККСНУМКСК

Крок 7: Додати декоративну лінію акценту

1. Створіть прямокутник для декоративного дивідора:

   • Ширина: 500, Висота: 8
   • Колір: Білий (#FFFFFF)
   • Посада нижче фраз

2. Додати брелок анімації для кольорового пілінгу:

Код еквівалентний:

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: Перегляд та відтворення

1. Прес Space для відтворення анімації
2. Лінія часу показує 6-секундну петлю
3. Дивитися притулок розкриває:
   • “DREAM BIG” попросить у листі
   • “WORK HARD” підбиває хвильовий ефект
   • “STAY HUMBLE” від центру

Крок 9: Експорт

Для Instagram Історія (Відео)

1. Натисніть кнопку Export
2. Виберіть WebM (рекомендований) або MP4
3. Налаштування:
   • Тривалість: 6 секунд
   • Каркасний тариф: 30 fps
   • Якість: Високий
4. Натисніть Export* і чекати для завантаження

Для інших платформ

Повний код

Ось повний код для відтворення цієї анімації:

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

Quick Start: Використовуйте шаблон

Замість будівлі з нуля, завантаження попередньо створеного шаблону:

1. Відкрити Templates Panel (права бічна панель)
2. Категорія: Соціальні медіа
3. Натисніть Motivational Цитувати
4. Шаблонні навантаження з усіма анімаціями готових

Лист колаж Стильи Посилання

Шахові візерунки

Поради

Contrast матері* — Легкий текст на темних фонах (або навпаки) необхідний для читання.

Красовий час* — 0,05-0.1 між літерами відчуває природне. Швидко виглядає механічно.

Mix styles* — Використання різних стилів Collage для кожної фрази додає візуальний інтерес.

Показ для акценту — bounce, що дало на “STAY HUMBLE”.

Наступний крок

• [Letter Collage Reference] (/features/letter-collage) — Всі стилі та варіанти
• Keyframe Editor — Індивідуальний контроль часу
• Effects — Додати блиск і родзинки
• [Physics Анімація] (/tutorials/physics-animation) — розширені ефекти знижування