Keyframe редактор

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

Q Q

Что такое Keyframes?

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

Открытие временной линии

Панель Timeline находится в нижней части экрана. Если спрятаны:

1. Нажмите Просмотр в меню
2. Выберите Показать хронологию

Создание Keyframes

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

1. Выберите элемент
2. Установите игровую головку в нужное время
3. Изменение свойства (положение, масштаб, непрозрачность, цвет)
4. Клавиатура создается автоматически

Метод 2: Таймлайновая панель

1. Выберите элемент
2. Нажмите на временную шкалу в нужное время
3. Нажмите Добавить Keyframe или нажмите K

Ключевые свойства

Редактирование Keyframes

Перемещение Keyframes

Перетащите клавиатуру влево или вправо на временной шкале, чтобы изменить свое время.

Редактирование ценностей

1. Нажмите на клавиатуру, чтобы выбрать его
2. Изменить значения в панели свойств
3. Изменения относятся к этому ключу

Удаление Keyframes

1. Выберите Keyframe
2. Нажмите Delete или щелкните правой кнопкой мыши → Удалить Keyframe

Упрощение функций

Управляйте ускорением анимации между кейфреймами:

Контроль воспроизведения

Трим и Сплит

Каждый элемент, анимированный с помощью кейфрейма, появляется на временной шкале как перетаскивающийся блок клипа (бар индиго за бриллиантами кейфрейма). Блок клипа позволяет:

• Перетащите тело — сместите всю анимацию в холстовое время (timeOffset).
• Перетащите левый край — обрежьте начало сыгранного поддиапазона. Правый край бара остается на якоре, что соответствует конвенции Premiere / Canva.
• Перетащите правый край — обрежьте конец проигрываемого поддиапазона, зажатого до последнего времени кейфрейма.
• Нажмите S с плейхедом внутри клипа — разделитесь на плейхед. Новая часть становится собственной записью в реестре; цепные разломы производят независимые части N + 1.

Поля данных

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

За окном холста клипа элемент спрятан через visible=false — непрозрачность оставлена в покое, поэтому непрозрачные анимационные клавиатуры все еще работают внутри окна.

// 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 разбивает ⇒ N+1 независимые части, каждая из которых имеет свою собственную запись в реестре. Практические последствия:

• Per-piece easing — изменить easing одного кейфрейма на один; остальные не тронуты.
• Цвет или интерполяция значений на кристалле — редактируйте fillColor, strokeColor или любое анимированное свойство на одном кристалле, чтобы применить другое преобразование через окно. Существующие интерполяторы цвета и градиента обрабатывают HSL/RGB lerp без изменений.
• Пространственный путь к одной части — spatialHandles живет внутри отдельных рамок, поэтому изгиб пути анимации одной части не влияет на другие.

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

Оригинальное название: Fade In Animation

1. Выберите текстовый элемент
2. Время 0: Установить непрозрачность до 0
3. Время 1s: Установить возможность до 1
4. Установить послабление Ease Out
5. Press Play для предварительного просмотра

Пример: Цветовой переход

1. Выберите элемент
2. At time 0s: Set Fill Color to #FF0000 (красный)
3. At Time 2s: Set Fill Color to #0000FF (синий)
4. Цвет плавно переходит через спектр

Оригинальное название: Camera Pan Effect

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

Как это работает

Когда у вас есть изображение больше, чем ваш холст:

• границы холста действуют как видопорт камеры
• Перемещение изображения слева = панели камеры справа
• Перемещение изображения вверх = панели камеры вниз

Создание пан-анимации

1. Установите размер холста ** на желаемый выход (например, 1920×1080 для HD-видео)
2. Импортировать большое изображение (больше, чем холст)
3. Поместите изображение так, чтобы начальный вид был виден
4. Создать кейфреймы для перемещения положения изображения

Сканирующий шаблон Row-by-Row

Чтобы сканировать изображение в змеином рисунке:

Альтернатива: Камера

Для динамического движения камеры, которое следует за объектом:

1. Создайте небольшой маркер или путь
2. Добавить отношение camera_follows к маркеру
3. Оживить положение маркера
4. Взгляд автоматически следует

Советы