Підручник: Фізико-розкладна анімація

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

Час:* 15 хвилин Difficulty:******************************************************************************************************************************************************************************************************************************************************* Головна

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

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

ХККСНУМКСК ХККСНУМКСК ХККСНУМКСК ХККСНУМКСК Ваш браузер не підтримує відео. Завантажити відео. ХККСНУМКСК

Особливості Covered

• Bounce easing* — Ефект кульки з реалістичною фізикою
• Еластичний спад* — Spring-like overshoot анімація
• Keyframe sequencing* — Звісно, багаторазовий хореографія
• Орбітальні зв’язки — Елементи, що об’єднуються навколо точки центру
• Camera анімація* — Смутний зум і сковородний ефект

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

1. Open PinePaper редактор
2. Набір розмірів полотна в *YouTube Thumbnail (1280×720)
3. Набір фонового кольору до #0a0a0a (чорний чорний)

Крок 2: Створити основну назву

1. Прес T для текстового інструменту
2. Натисніть центр полотно, тип: PHYSICS
3. Властивості панелі:
   • Розмір шрифту: 120*
   • Сім’я шрифтів: Інтер (або будь-який сміливий sans-serif)
   • Колір: #ffffff
4. Центр на полотні

Крок 3: Додати Gravity Drop Анімація

Ми зробимо заголовок з вищезгаданого ефекту.

1. Виберіть текст назви
2. Відкрити Панель часу (знизу)
3. Додати ключові кадри:

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

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 (аmber)
2. Посада біля центру
3. Додати orbits:

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 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 (фізика диму)
   • Лоп: Yes (для соціальних медіа)

Повний код

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

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

Шлях Анімація

Зробіть елементи слідувати вигину Bezier:

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

Поради

Тімінг – це все — Стартові елементи в дещо різний час (0.1-0.2s окремо) для більш натурального почуття.

Combine easings — Використовуйте bounce для посадки, elastic для масштабування, easeOut для фасадів.

60fps для фізики — Вищі частоти кадрів роблять відмову / еластичні ефекти виглядають гладкіше.

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

• [Морфінг Анімація] (/tutorials/morphing) — Форформні форми в один одного
• [Map Анімації] (/tutorials/map-animation) — Анімація географічних даних
• [Реляційна система] (/features/relations) — Глибокий занурення в зв’язки