Относительные значения

В системах анимации на основе JavaScript часто требуется изменять параметры не в абсолютных координатах, а относительно текущего состояния объекта. Такой подход позволяет строить композиционные эффекты, где каждое новое движение накладывается на предыдущее, формируя динамическое поведение без постоянного пересчёта исходных значений.

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

Синтаксис относительных значений

Относительное значение задаётся строкой, содержащей оператор смещения:

  • "+=N" — увеличение текущего значения на N
  • "-=N" — уменьшение текущего значения на N

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

const tween = new mojs.Tween({
  duration: 1000,
  onUpdate: function (progress) {
    this.el.style.transform = `translateX(${this.props.x}px)`;
  },
  x: '+=150'
});

В данном случае значение x не фиксируется как 150, а добавляется к текущему состоянию объекта.

Интерпретация относительных выражений

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

  1. Определение текущего значения свойства
  2. Парсинг строки относительного выражения
  3. Вычисление итогового значения
  4. Использование результата как цели интерполяции

Если текущее значение координаты равно 200, а задано "+=50", итоговая целевая точка становится 250.

Применение в координатных анимациях

Относительные значения особенно полезны при работе с позиционированием объектов в сцене. Это позволяет строить последовательные перемещения без хранения промежуточного состояния вручную.

const move = new mojs.Tween({
  duration: 800,
  x: '+=100',
  y: '-=40',
  onUpdate: function () {
    this.el.style.transform =
      `translate(${this.props.x}px, ${this.props.y}px)`;
  }
});

Такая запись формирует движение по диагонали, где каждое новое выполнение твина может наращивать смещение относительно текущей позиции.

Относительные значения в трансформациях

При работе с трансформациями чаще всего используются параметры:

  • x, y — смещение по осям
  • angle — поворот
  • scale — масштабирование

Относительное изменение масштаба:

const scaleTween = new mojs.Tween({
  duration: 600,
  scale: '+=0.5',
  onUpdate: function () {
    this.el.style.transform = `scale(${this.props.scale})`;
  }
});

Значение scale увеличивается относительно текущего, что позволяет создавать эффект «пульсации» или наращивания формы без сброса базового состояния.

Кумулятивное поведение и цепочки анимаций

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

const step = new mojs.Tween({
  duration: 500,
  x: '+=30'
});

// многократный запуск
step.play();
step.play();
step.play();

В результате объект будет смещаться на 30 единиц при каждом запуске, формируя пошаговую траекторию.

Взаимодействие с Timeline

В рамках mojs.Timeline относительные значения позволяют строить составные анимации, где каждый следующий твин продолжает предыдущее состояние.

const t1 = new mojs.Tween({
  duration: 400,
  x: '+=50'
});

const t2 = new mojs.Tween({
  duration: 400,
  y: '+=50'
});

const timeline = new mojs.Timeline({}).add(t1, t2);
timeline.play();

Первый твин изменяет горизонтальную позицию, второй продолжает трансформацию, используя уже изменённое состояние объекта.

Ограничения относительных значений

Использование относительных выражений требует учёта ряда особенностей:

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

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

Смешанные режимы значений

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

const mix = new mojs.Tween({
  duration: 700,
  x: 300,
  y: '+=80'
});

В этом случае горизонтальная координата фиксируется, а вертикальная изменяется относительно текущего положения.

Относительные значения в сложных сценах

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

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

Композиция из нескольких объектов с относительными смещениями позволяет формировать поведение системы без жёсткой привязки к координатной сетке.

Поведение при сбросе состояния

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

el.style.transform = 'translate(0px, 0px)';

Без такого сброса каждое новое воспроизведение твина будет продолжать накопление смещения.

Влияние на читаемость анимационного кода

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

Оглавление