Множественные ключевые точки

В mo.js анимация строится вокруг объектов tween и timeline, где движение задаётся через набор параметров, изменяющихся во времени. Множественные ключевые точки позволяют описывать не линейную интерполяцию «из A в B», а сложные траектории состояния объекта, включающие промежуточные состояния, резкие переходы, нелинейные кривые и комбинированные трансформации.

Ключевая точка (key point) в контексте mo.js представляет собой состояние набора свойств объекта в определённый момент времени. При наличии нескольких точек библиотека автоматически вычисляет промежуточные значения через интерполяцию, формируя непрерывное или сегментированное изменение параметров.

Структура множественных ключевых точек

В mo.js ключевые точки задаются массивом объектов. Каждый объект описывает состояние свойств и момент времени, к которому это состояние относится.

const tween = new mojs.Tween({
  duration: 2000,
  repeat: 0,
  onUpdate(progress) {
    console.log(progress);
  },
  keyframes: [
    { x: 0, opacity: 0 },
    { x: 200, opacity: 1 },
    { x: 100, opacity: 0.5 }
  ]
});

Каждый элемент массива:

  • описывает набор свойств
  • может содержать временную привязку
  • участвует в построении интерполяционной кривой

Если временные метки не указаны явно, распределение происходит равномерно по длительности tween.

Явное управление временем через offset

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

const tween = new mojs.Tween({
  duration: 3000,
  keyframes: [
    { x: 0, opacity: 0, offset: 0 },
    { x: 300, opacity: 1, offset: 0.3 },
    { x: 150, opacity: 0.2, offset: 1 }
  ]
});

Особенности offset-модели

  • offset: 0 соответствует началу анимации
  • offset: 1 соответствует завершению
  • промежуточные значения определяют нелинейное распределение времени
  • порядок ключевых точек не обязан совпадать с временной последовательностью, но логически должен оставаться согласованным

При отсутствии offset mo.js распределяет ключевые точки по индексу массива.

Интерполяция между ключевыми состояниями

Между ключевыми точками происходит интерполяция значений свойств. Тип интерполяции зависит от характера данных:

  • числовые значения: линейная или easing-интерполяция
  • цвета: поканальная интерполяция RGBA
  • трансформации: разложение на компоненты
  • массивы: поэлементная интерполяция при совпадении структуры
keyframes: [
  { x: 0, scale: 1 },
  { x: 100, scale: 2 },
  { x: 200, scale: 1 }
]

Здесь движение scale формирует «волнообразную» кривую: увеличение и возврат к исходному значению.

Независимые easing-функции для каждой точки

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

keyframes: [
  { x: 0, easing: 'linear' },
  { x: 200, easing: 'cubic.out' },
  { x: 100, easing: 'elastic.out' }
]

Поведение easing в цепочке

  • easing текущей точки влияет на переход к следующей
  • последовательность easing-функций формирует составную кривую движения
  • возможна комбинация резких и плавных участков в одной анимации

Такой подход позволяет создавать сложные motion-паттерны без разбиения на отдельные tween-объекты.

Множественные свойства в одной ключевой точке

Каждая точка может содержать произвольное количество анимируемых параметров.

keyframes: [
  { x: 0, y: 0, scale: 1, opacity: 0 },
  { x: 150, y: -50, scale: 1.5, opacity: 1 },
  { x: 300, y: 0, scale: 1, opacity: 0.3 }
]

Особенности комбинирования свойств

  • все свойства синхронизированы по времени внутри одного keyframe
  • интерполяция происходит независимо по каждой оси
  • возможно сочетание трансформаций и визуальных эффектов

Несинхронные ключевые точки и сложные траектории

При использовании offset можно создавать асимметричные анимации, где разные свойства «живут» по разным временным схемам.

keyframes: [
  { x: 0, opacity: 0, offset: 0 },
  { x: 200, offset: 0.5 },
  { opacity: 1, offset: 0.2 },
  { x: 100, opacity: 0.5, offset: 1 }
]

Поведение при пересечении offset

  • свойства объединяются по временным позициям
  • отсутствующие значения наследуются через интерполяцию
  • формируется сложная временная карта изменений

Такой подход позволяет создавать эффект «развязанных» анимаций, где визуальные параметры изменяются независимо.

Работа с цветами в множественных ключевых точках

mo.js поддерживает интерполяцию цветов в формате HEX, RGB и RGBA.

keyframes: [
  { background: '#ff0000' },
  { background: '#00ff00' },
  { background: '#0000ff' }
]

Поведение цветовой интерполяции

  • переход происходит по каналам R, G, B
  • прозрачность интерполируется отдельно
  • возможны резкие смены при использовании easing типа step

Использование массива ключевых точек в Shape-анимации

В shape-модулях mo.js ключевые точки часто применяются для трансформации геометрии и параметров фигуры.

const shape = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 80 },
  stroke: 'white',
  strokeWidth: { 2: 10 },
  duration: 1500,
  keyframes: [
    { scale: 1, strokeWidth: 2 },
    { scale: 1.5, strokeWidth: 8 },
    { scale: 1, strokeWidth: 2 }
  ]
});

Особенности shape keyframes

  • изменения геометрии синхронизируются с визуальными эффектами
  • можно комбинировать transform и stroke/fill параметры
  • поддерживается плавная деформация через промежуточные состояния

Координация ключевых точек внутри timeline

Timeline в mo.js позволяет синхронизировать несколько анимаций, каждая из которых может иметь собственные keyframes.

const timeline = new mojs.Timeline();

const tween1 = new mojs.Tween({
  duration: 2000,
  keyframes: [
    { x: 0 },
    { x: 300 }
  ]
});

const tween2 = new mojs.Tween({
  duration: 2000,
  keyframes: [
    { opacity: 0 },
    { opacity: 1 },
    { opacity: 0 }
  ]
});

timeline.add(tween1, tween2);
timeline.play();

Поведение в timeline

  • все tween синхронизируются по старту
  • ключевые точки интерпретируются относительно локального времени каждого tween
  • возможна каскадная анимация через разные duration

Плотные ключевые сетки и производительность

При большом количестве keyframes важно учитывать влияние на производительность интерполяции.

Основные факторы нагрузки

  • количество точек в одном tween
  • частота обновления (requestAnimationFrame)
  • сложность интерполируемых типов (цвет, transform, path)

Практическое поведение

  • линейная сложность по количеству keyframes
  • оптимизация через сокращение избыточных точек
  • предпочтение offset-структуры вместо плотных массивов при сложных сценах

Повторяющиеся паттерны ключевых точек

Множественные keyframes часто используются для создания циклических движений.

keyframes: [
  { y: 0 },
  { y: -50 },
  { y: 0 }
]

Такой паттерн формирует базу для:

  • пульсации
  • колебаний
  • дыхательных эффектов
  • микроанимаций интерфейса

При добавлении easing кривые приобретают естественную динамику без необходимости увеличения числа точек.

Ошибки при проектировании множественных ключевых точек

Некорректная структура keyframes приводит к непредсказуемым результатам интерполяции.

Типичные проблемы

  • отсутствие offset при неравномерной логике движения
  • пересечение значений без логического порядка
  • смешивание несовместимых типов данных в одном свойстве
  • чрезмерное количество промежуточных точек вместо корректного easing

Поведенческие эффекты ошибок

  • резкие скачки значений
  • деградация плавности анимации
  • визуальные артефакты при трансформации
  • неконсистентные временные интервалы между состояниями
Оглавление