Назначение модуля Tween

Tween в mo.js представляет собой базовый механизм интерполяции значений во времени, на котором строится большая часть анимационной логики библиотеки. Tween отвечает за плавное изменение числовых параметров между начальным и конечным состоянием с учётом временных функций, задержек и дополнительных модификаторов поведения анимации.

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

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

В отличие от высокоуровневых модулей, таких как Shape или Burst, Tween не занимается визуальным представлением. Он оперирует только математикой изменения значений.

Принцип интерполяции значений

Основой Tween является интерполяция — вычисление промежуточных значений между стартовой и конечной точкой на основе прогресса анимации.

При линейной интерполяции используется базовая зависимость:

x(t) = x_0 + (x_1 - x_0) t

где t изменяется от 0 до 1 в течение длительности анимации.

Однако в mo.js значение t почти никогда не используется напрямую. Оно преобразуется через easing-функции, которые изменяют характер движения: ускорение, замедление, колебания.

Создание Tween и базовая структура

Tween создаётся через конструктор mojs.Tween, которому передаётся объект конфигурации:

const tween = new mojs.Tween({
  duration: 1000,
  delay: 0,
  repeat: 0,
  easing: 'linear',

  onStart: function () {},
  onUpdate: function (progress) {},
  onComplete: function () {}
});

Ключевым параметром является duration, определяющий длительность анимационного цикла в миллисекундах. Значение progress, передаваемое в onUpdate, нормализовано в диапазон от 0 до 1 и отражает текущее состояние интерполяции.

Временные параметры и управление циклом

Tween предоставляет набор параметров, влияющих на поведение временной шкалы:

duration Определяет длину одного цикла анимации. Чем больше значение, тем медленнее происходит интерполяция.

delay Задержка перед стартом анимации. Используется для синхронизации нескольких Tween в последовательности.

repeat Количество повторов анимации. При значении -1 анимация становится бесконечной.

yoyo Определяет обратное проигрывание анимации после завершения цикла. При включении значение прогресса изменяется в прямом и обратном направлении.

Математически поведение yoyo можно представить как отражение функции прогресса:

t’ = 1 - t

для обратного хода.

Easing-функции и управление динамикой

Easing определяет характер изменения прогресса во времени. Вместо равномерного движения Tween может ускоряться, замедляться или комбинировать различные типы поведения.

В mo.js используются функции вида:

  • linear
  • ease.in
  • ease.out
  • ease.inout
  • bounce
  • elastic

Каждая функция преобразует линейный прогресс t в модифицированное значение e(t).

Пример нелинейного преобразования:

t’ = e(t)

где e(t) — произвольная easing-функция.

Область применения Tween

Tween используется как универсальный слой анимации для различных типов данных:

Числовые значения Наиболее частый сценарий: изменение координат, масштаба, прозрачности.

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

SVG-параметры Изменение атрибутов, таких как stroke-dashoffset, transform, координаты точек.

Объектные значения JavaScript Tween может работать с произвольными объектами, изменяя их свойства во времени.

Пример интерполяции объекта:

const tween = new mojs.Tween({
  duration: 800,
  onUpdate: function (p) {
    const value = {
      x: 100 * p,
      opacity: 1 - p
    };

    console.log(value);
  }
});

Система обновлений и жизненный цикл

Tween работает на основе кадровой системы, синхронизированной с requestAnimationFrame. Каждый тик анимации включает несколько этапов:

  • вычисление текущего времени
  • нормализация прогресса
  • применение easing
  • обновление значений
  • вызов onUpdate

Жизненный цикл можно представить как последовательность состояний:

  • ожидание старта (delay)
  • активная интерполяция
  • завершение цикла
  • повтор (при repeat)
  • финальное завершение

Управление состоянием Tween

Tween предоставляет методы управления воспроизведением:

play() Запуск или возобновление анимации.

pause() Приостановка на текущем кадре без сброса состояния.

stop() Остановка с переходом в начальное состояние или сохранением текущего значения в зависимости от конфигурации.

reset() Сброс прогресса в начальную точку без запуска.

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

События жизненного цикла

Tween поддерживает систему callback-функций, позволяющих реагировать на ключевые моменты:

  • onStart — запуск анимации
  • onUpdate — каждый кадр изменения
  • onComplete — завершение цикла
  • onRepeat — начало нового цикла

Эти события формируют основу для построения реактивной анимационной логики.

Связь Tween с другими компонентами mo.js

Tween является фундаментом, на котором строятся более сложные модули. Shape, Burst и Timeline используют Tween как внутренний механизм управления временем и интерполяцией.

Timeline объединяет несколько Tween в единую последовательность, синхронизируя их выполнение и создавая сложные анимационные сценарии.

Таким образом, Tween выступает базовым вычислительным слоем, обеспечивающим единообразие поведения всех анимационных сущностей в системе mo.js.

Оглавление