Оригинальное название: Create animated Motivational Post

Научитесь создавать привлекательные анимированные мотивационные цитаты для Instagram Stories с помощью анимации Letter Collage.

Время: 10 минут Трудность: Начинающий

Что вы будете создавать

Потрясающая анимированная мотивационная цитата с тремя фразами, каждая из которых использует разные стили коллажа букв и ошеломляющие анимации.

Особенности, которые вы узнаете

• Letter Collage styles — неоновые плитки, вырезы журналов, эффекты резки бумаги
• Украшенная анимация — письма, появляющиеся по одному
• Наземные генераторы — анимированные фоны солнечных вспышек
• Анимация кейфреймов — Цветовые переходы и эффект сверкания

Шаг 1: Настройка холста

1. Открытый редактор PinePaper
2. Нажмите canvas size dropdown в нижнем колонтитуле
3. Выберите История Instagram (1080×1920)

Шаг 2: Добавьте анимированный фон

1. Нажмите на вкладку Scenes в правой панели
2. Настройка фонового режима Generator
3. Выберите Sunburst
4. Настройка цветов:
   • Цвет 1: #FF6B6B (красный)
   • Цвет 2: #4ECDC4 (украсть)
   • Цвет 3: #FFE66D (желтый)
5. Набор Ray Count: 16
6. Включить Animate и установить скорость: 0,5
7. Нажмите Generate

Шаг 3: Создайте «Большой сон»

1. Нажмите кнопку Letter Collage в панели инструментов (или нажмите L)
2. Оригинальное название: Dream Big
3. Настройка стиля:
   • Стиль: Tile
   • Палетка: Neon
   • Размер шрифта: 72
   • Угол Радиус: 8
   • Скачать Shadow
4. Расположение в зоне с центром (x: 540, y: 750)

Эквивалент кода:

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

Шаг 4: Добавьте анимацию в «Большой сон»

1. С выбранным коллажем откройте Timeline Panel
2. Нажмите Добавить анимацию
3. Настройка:
   • Эффект: Pop In
   • Отсрочка: 0.08
   • Продолжительность: 0,5
   • Последовательность: Linear (слева направо)
   • Упрощение: easeOut

Эквивалент кода:

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

Шаг 5: Создайте «трудный» коллаж писем

1. Создайте еще один коллаж с письмом:

   • Оригинальное название: Work Hard
   • Стиль: Журнал (взгляд с вырезной запиской)
   • Палетка: Журнал
   • Размер шрифта: 60
   • Должность: (540, 920)

2. Добавить анимацию:

   • Оригинальное название: Fade Slide Up
   • Задержка срабатывания: 0.1
   • Последовательность: 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
   • Оригинальное название: Paper Cut (3D Shadow Effect)
   • Размер шрифта: 68
   • Должность: (540, 1100)

2. Добавьте потрясающую анимацию с отскоком:

   • Эффект: Pop In
   • Отсрочка: 0.06
   • Последовательность: Центр (открывается с середины наружу)
   • Упрощение: 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'
});

Шаг 7: Добавить линию декоративного акцента

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

   • Ширина: 500, высота: 8
   • Цвет: белый (#FFFFFF)
   • Положение под фразами

2. Добавьте анимацию Keyframe для пульсации цвета:

Эквивалент кода:

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. Timeline показывает 6-секундный цикл
3. Смотрите поразительные откровения:
   • «DREAM BIG» появляется в письмах
   • «Рабочая сила» скользит вверх с волновым эффектом
   • «STAY HUMBLE» отскакивает от центра наружу

Шаг 9: Экспорт

История Instagram (видео)

1. Нажмите кнопку Экспорт
2. Выберите WebM (рекомендуется) или MP4
3. Настройка:
   • Продолжительность: 6 секунд
   • Уровень кадров: 30 fps
   • Качество: Высокий
4. Нажмите Экспорт и ждите загрузки

Для других платформ

Полный код

Вот полный код для воссоздания этой анимации:

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

Быстрый старт: используйте шаблон

Вместо того, чтобы строить с нуля, загрузите предварительно построенный шаблон:

1. Открытая Панель образцов (правая боковая панель)
2. Выберите категорию Социальные медиа
3. Нажмите Мотивационная цитата
4. Шаблон загружается со всеми готовыми анимациями

Ссылка на стиль коллажа

Шаблоны последовательностей Stagger

Pro Советы

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

Синхронизация — 0,05-0,1 с между буквами кажется естественной. Слишком быстро выглядит механически.

Смешанные стили - Использование различных стилей буквенного коллажа для каждой фразы добавляет визуальный интерес.

Отскакивайте для акцента — Ослабление bounce на «Оставайся умным» привлекает дополнительное внимание.

Следующие шаги

• [Ссылка на коллаж] (/features/letter-collage) — все стили и варианты
• [Keyframe Editor] (/features/keyframes) — пользовательский контроль времени
• [Влияние] (/features/effects) — Добавить искры и выделения
• [Физическая анимация] (/tutorials/physics-animation) — Продвинутые эффекты смягчения