Оригинальное название: Physics Based Animation

Создавайте потрясающие анимации с использованием эффектов отскока, эластичности и гравитации с помощью секвенирования ключевых кадров.

Время: 15 минут Сложность: продвинутый

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

Драматический заголовок раскрывается с помощью текстовой анимации на основе физики, орбитальных элементов и плавных движений камеры.

Особенности, покрытые

• Смягчение отскока — эффект падения шара с реалистичной физикой
• Elasticeasing — анимация весеннего перескока
• Keyframe sequencing — точно рассчитанная по времени многоэлементная хореография
• Орбитальные отношения — Элементы, вращающиеся вокруг центральной точки
• Камерная анимация — плавный зум и пан-эффекты

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

1. Открытый редактор PinePaper
2. Установите размер холста до YouTube Thumbnail (1280×720)
3. Установите цвет фона на #0a0a0a (близко к черному)

Шаг 2: Создайте основное название

1. Нажмите T для текстового инструмента
2. Click center canvas, type: Физика
3. В панели свойств:
   • Размер шрифта: 120
   • Семья шрифтов: Inter (или любой смелый без засечек)
   • Цвет: #ffffff
4. Центр на холсте

Шаг 3: Добавьте анимацию Gravity Drop

Мы сделаем так, чтобы название упало сверху с эффектом отскока.

1. Выберите текст заголовка
2. Open Timeline Panel (внизу)
3. Добавить keyframes:

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

const title = app.create('text', {
  content: 'PHYSICS',
  x: 640, y: -100,
  fontSize: 120,
  color: '#ffffff'
});

app.addAnimation(title.data.id, [
  { time: 0, properties: { y: -100, opacity: 0 } },
  { time: 0.3, properties: { y: 360, opacity: 1 }, easing: 'bounce' }
]);

Шаг 4: Добавьте субтитры с эластичным эффектом

1. Подзаголовок сообщения: IN MOTION
2. Размер шрифта: 48, цвет: #60a5fa (синий)
3. Позиция ниже основного названия

Добавить эластичную анимацию:

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

const subtitle = app.create('text', {
  content: 'IN MOTION',
  x: 640, y: 450,
  fontSize: 48,
  color: '#60a5fa'
});

app.addAnimation(subtitle.data.id, [
  { time: 0.4, properties: { scale: 0, opacity: 0 } },
  { time: 0.8, properties: { scale: 1, opacity: 1 }, easing: 'elastic' }
]);

Шаг 5: Добавьте орбитальные частицы

Создание визуального интереса с помощью орбитальных элементов.

1. Создайте небольшой круг: радиус 8, цвет #fbbf24 (янтарь)
2. Расположение рядом с центром
3. Добавить соотношение орбит:

const particle1 = app.create('circle', {
  x: 640, y: 360,
  radius: 8,
  color: '#fbbf24'
});

// Make it orbit around the title center
app.addRelation(particle1.data.id, title.data.id, 'orbits', {
  radius: 150,
  speed: 0.5,
  direction: 'clockwise'
});

4. Дублировать и создавать еще 2 частицы с разными радиусами и скоростями:
   • Частица 2: радиус 120, скорость 0.7, цвет #f472b6 (розовый)
   • Частица 3: радиус 180, скорость 0.3, цвет #34d399 (зеленый)

Шаг 6: Добавить камеру Zoom

Создайте кинематографическое ощущение с помощью анимации камеры.

// Zoom in slightly during the reveal
app.addRelation('camera', null, 'camera_animates', {
  duration: 2,
  keyframes: [
    { time: 0, zoom: 0.9, center: [640, 360] },
    { time: 0.5, zoom: 1.1, center: [640, 360], easing: 'easeOut' },
    { time: 2, zoom: 1, center: [640, 360], easing: 'easeInOut' }
  ]
});

Шаг 7: Предварительный просмотр и экспорт

1. Нажмите Space для предварительного просмотра
2. Скорректировать сроки по мере необходимости
3. Экспорт как WebM (рекомендуется) или MP4
   • Продолжительность: 3 секунды
   • Частота кадров: 60 fps (смежная физика)
   • Петля: Да (для социальных сетей)

Полный код

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

// Setup
app.setCanvasSize('youtube-thumbnail');
app.setBackgroundColor('#0a0a0a');

// Main title with gravity drop
const title = app.create('text', {
  content: 'PHYSICS',
  x: 640, y: -100,
  fontSize: 120,
  color: '#ffffff',
  fontFamily: 'Inter'
});

app.addAnimation(title.data.id, [
  { time: 0, properties: { y: -100, opacity: 0 } },
  { time: 0.3, properties: { y: 360, opacity: 1 }, easing: 'bounce' }
]);

// Subtitle with elastic spring
const subtitle = app.create('text', {
  content: 'IN MOTION',
  x: 640, y: 450,
  fontSize: 48,
  color: '#60a5fa'
});

app.addAnimation(subtitle.data.id, [
  { time: 0.4, properties: { scale: 0, opacity: 0 } },
  { time: 0.8, properties: { scale: 1, opacity: 1 }, easing: 'elastic' }
]);

// Orbiting particles
const colors = ['#fbbf24', '#f472b6', '#34d399'];
const orbits = [
  { radius: 150, speed: 0.5 },
  { radius: 120, speed: 0.7 },
  { radius: 180, speed: 0.3 }
];

orbits.forEach((orbit, i) => {
  const particle = app.create('circle', {
    x: 640, y: 360,
    radius: 8,
    color: colors[i]
  });

  app.addRelation(particle.data.id, title.data.id, 'orbits', {
    radius: orbit.radius,
    speed: orbit.speed,
    phase: i * (Math.PI * 2 / 3) // Spread evenly
  });
});

// Camera animation
app.addRelation('camera', null, 'camera_animates', {
  duration: 2,
  keyframes: [
    { time: 0, zoom: 0.9, center: [640, 360] },
    { time: 0.5, zoom: 1.1, center: [640, 360], easing: 'easeOut' },
    { time: 2, zoom: 1, center: [640, 360], easing: 'easeInOut' }
  ]
});

// Play with 3-second loop
app.playKeyframeTimeline(3, true);

Вариации

Разоблачительное письмо

Используйте коллаж писем с ошеломляющей анимацией:

const collage = app.letterCollage.create('PHYSICS', {
  style: 'tile',
  palette: 'neon',
  fontSize: 80
});

app.letterCollage.applyStaggeredAnimation(collage.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.4,
  easing: 'elastic'
});

Анимация Path

Заставьте элементы следовать кривой Безье:

const star = app.create('star', {
  x: 100, y: 360,
  radius: 20,
  color: '#fbbf24'
});

// Animate along a curved path
app.animate(star, {
  animationType: 'path',
  pathPoints: [
    [100, 360],   // Start
    [400, 200],   // Control point 1
    [800, 500],   // Control point 2
    [1180, 360]   // End
  ],
  pathSmooth: true,
  animationSpeed: 0.3
});

Pro Советы

Время - это все - Стартовые элементы в несколько разное время (0,1-0,2 секунды) для более естественного ощущения.

Combine easings — Используйте bounce для посадки, elastic для масштабирования, easeOut для выцветания.

60 кадров в секунду для физики — более высокие частоты кадров делают отскок / эластичные эффекты более плавными.

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

• [Morphing Animation] (/tutorials/morphing) - Преобразование форм друг в друга
• [Картовые анимации] (/tutorials/map-animation) — анимированные географические данные
• [Система отношений] (/features/relations) — глубокое погружение в отношения элементов