Головний редактор

Створення складних, точночасних анімацій за допомогою брелоків.

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

Які основні кадри?

Ключові кадри визначають певні значення нерухомості в конкретних точках часу. PinePaper автоматично анімує (інтерполати) між ключовими рамками для створення плавних переходів.

Відкриття часу

Панель Timeline знаходиться в нижній частині екрана. Якщо прихована:

1. Натисніть Перегляд* в меню
2. ***Показати час

Створення брелоків

Спосіб 1: Панель властивостей

1. Оберіть товар
2. Встановити плейголову до потрібного часу
3. Зміна майна (положення, масштаб, непрозорість, колір)
4. Автоматично створений ключ

Спосіб 2: Панель часової лінії

1. Оберіть товар
2. Натисніть на часову лінію за бажаним часом
3. Клацніть Add Keyframe або натисніть K

Основні властивості

Редагування ключових кадрів

Переміщення основних рамок

Перетягніть ліву або праву на час, щоб змінити час.

Редагування значень

1. Натисніть на ключові кадри, щоб вибрати його
2. Змінення значень у панелі властивостей
3. Зміни, які застосовуються до цієї клавіатури

Видалення брелоків

1. Виберіть ключові кадри
2. Натисніть Delete або клацніть правою кнопкою миші → Delete Keyframe

Використання функцій

Контроль прискорення анімації між ключовими кадрами:

Контроль відтворення

Трім і Спліт

Кожна ключова рамка-анімована деталь з’являється на часовій лінії як перетягування блоку кліпу (індіго бару за ключовими рамками діамантів). Блок кліпу дозволяє вам:

• Drag the body — зміна всієї анімації в часі полотна (timeOffset).
• Драг лівого краю — обрізка старту відтвореного підряду. Правий край бару залишається закріплений, що відповідає конвенції Premiere/Canva.
• Драг правого краю — обрізаємо кінець відтвореного підряду, затискаємо до останнього часу за ключовими рамками.
• Press S з головкою всередині кліпу — розбити на ігровому майданчику. Новий елемент стає власним реєстровим записом; ланцюгові розгалуження виробляє незалежні шматки N+1.

Поле даних

Кліп-блок UI карти на ці поля на елементі:

Всередині вікна кліпу елемент прихований через visible=false — opacity залишається тільки таким чином непрозорі ключі все ще працюють всередині вікна.

// Programmatic equivalent of right-edge trim.
const item = app.create('text', {
  content: 'Reveal', x: 400, y: 300,
  animationType: 'keyframe',
  timeOffset: 2,        // clip starts at canvas time 2s
  clipInPoint: 1,       // skip the first 1s of keyframe data
  clipOutPoint: 4,      // stop at 4s of keyframe data → 3s clip window
  keyframes: [
    { time: 0, properties: { opacity: 0 } },
    { time: 1, properties: { opacity: 1 } },
    { time: 4, properties: { opacity: 0.3 } },
  ],
});

Який спліт дає вам

Спліт – глибока копія. Paper.js елемент клонований через Item.clone() (збереження перетворення + стиль); основні рамки масивів (keyframes, contentKeyframes, propertyEasings) є JSON округлою, так що кожен шматок володіє його даними. Ланцюг розщеплює масштаби лінійно: N splits ⇒ N+1 самостійні шматки, кожен власний реєстр. Практичні наслідки:

• Заготовка дразне — зміна одного з основних рамок easing на одному шматку; інші доручені.
• Перезавантажити колір або значення interpolation — відредагувати ключові кадри fillColor, strokeColor, або будь-який анімаційний об’єкт, який буде застосовано для різних перетворень над вікном. Властивий колір і градієнтовні міжполімери ручать HSL/RGB lerp без змін.
• Пер-штабний просторовий шлях — spatialHandles живо всередині окремих комірок, тому викривлення шляху анімації одного предмета не впливає на інші.

Шматочки не візуально перекриваються до тих пір, поки їх вікна не перекриваються. Перетягніть будь-який шматок на нову полотно-часову позицію, обрізайте її знову або розбити її далі.

Приклад: Fade In Анімація

1. Виберіть текст
2. В час 0-х: Встановити Opacity до 0
3. 1 час: Set Opacity до 1
4. Ease Out**********************************************************************************************************************************************************************************************************************************************************
5. Прес-гра для попереднього перегляду

Приклад: Колір Перехід

1. Оберіть товар
2. В час 0s: встановити колір заповнення до #FF0000 (червоний)
3. В час 2s: встановити колір заповнення до #0000FF (синій)
4. Колір плавно переходить через спектр

Приклад: Камера Pan Effect

Створюйте анімацію кіно на великих зображеннях, використовуючи полотно як видпорт.

Як працює

Коли у вас є зображення більше, ніж ваше полотно:

• The canvas межі діють як вид на камеру
• Переміщення зображення**********
• Переміщення*********

Створення Pan Анімація

1. Розмір полотна** на Ваш бажаний вихід (наприклад, 1920×1080 для відео HD)
2. Імпорт великого зображення (великий ніж полотно)
3. Положення зображення, тому зовнішній вигляд видно
4. Create keyframes* для переміщення положення зображення

Row-by-Row сканування шаблон

Щоб відсканувати зображення в патертиновому шаблоні:

Альтернатива: Камера слідує

Для динамічного руху камери, який слідує об’єктом:

1. Створіть невеликий маркер або шлях
2. Додати співвідношення camera_follows до маркера
3. Анімувати позицію маркера
4. Репортаж автоматично

ХККСНУМКСК

Поради щодо пана камери:

• Використовуйте Ease In-Out для гладкого, кінематографічного руху
• Зберігати частоту пана для професійних результатів
• Експорт як MP4 або WebM для найкращої якості

ХККСНУМКСК

Навігація

ХККСНУМКСК

Основні поради:

• Використовуйте декілька ключових кадрів для плавної анімації
• Ease In-Out створює природний рух
• Перегляньте часто, щоб перевірити час

ХККСНУМКСК

ХККСНУМКСК

Перетворення: Дуже складна анімація ключових рамок (багато ключових кадрів) може вплинути на експортну продуктивність.

ХККСНУМКСК