Модификация позиций и трансформаций

Анимации Lottie основаны на данных, экспортированных из Adobe After Effects в JSON-формате. Внутри структуры каждой композиции находятся слои, ключевые кадры и набор трансформационных параметров, которые описывают положение, масштаб, поворот и якорную точку элементов. В Lottie Web эти параметры доступны для динамического изменения во время выполнения, что позволяет адаптировать анимации под состояние интерфейса без пересборки JSON.

Структура трансформаций слоя

Каждый слой в Lottie содержит объект transform, который включает основные параметры:

  • position (p) — координаты слоя
  • scale (s) — масштаб по осям X и Y
  • rotation (r) — угол поворота
  • anchor point (a) — точка привязки трансформаций
  • opacity (o) — прозрачность

В зависимости от экспорта структура может отличаться, но логика остаётся одинаковой: все трансформации применяются относительно anchor point.

Пример структуры слоя:

{
  "ty": 4,
  "ks": {
    "p": { "a": 0, "k": [100, 200] },
    "r": { "a": 0, "k": 45 },
    "s": { "a": 0, "k": [100, 100] },
    "a": { "a": 0, "k": [0, 0] },
    "o": { "a": 0, "k": 100 }
  }
}

Доступ к анимации через Lottie Web API

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

const anim = lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'animation.json'
});

Для модификации трансформаций используется метод getItem или работа с внутренними слоями через rendererElements.

Изменение позиции слоя

Позиция в Lottie представлена как двумерный или трёхмерный вектор. При изменении позиции важно учитывать, что значения могут быть как статическими, так и анимированными (keyframes).

Базовое изменение позиции

const layer = anim.renderer.elements[0];

layer.transform.mProps.p.v = [300, 150];

Изменение происходит мгновенно и перезаписывает текущее значение позиции. Такой подход применим только к неанимированным свойствам.

Работа с анимированными значениями

Если позиция содержит ключевые кадры, используется доступ к текущему значению через currentValue.

const pos = layer.transform.mProps.p;

pos.v = [pos.v[0] + 50, pos.v[1]];

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

Масштабирование объектов

Масштаб задаётся как массив из двух значений: [scaleX, scaleY]. Значения интерпретируются в процентах.

Установка фиксированного масштаба

layer.transform.mProps.s.v = [150, 150];

Увеличение масштаба влияет на весь слой целиком, включая вложенные элементы.

Анимация масштаба через код

Изменение масштаба в реальном времени может использоваться для создания реактивных интерфейсов:

function pulse() {
  let scale = 100 + Math.sin(Date.now() * 0.005) * 20;
  layer.transform.mProps.s.v = [scale, scale];
  requestAnimationFrame(pulse);
}

pulse();

Такой подход заменяет встроенную анимацию After Effects и позволяет управлять поведением слоя программно.

Поворот и управление углом

Поворот задаётся в градусах. В SVG-рендерере Lottie преобразует значение в соответствующую матрицу трансформации.

Простая модификация угла

layer.transform.mProps.r.v = 90;

Непрерывное вращение

function rotate() {
  layer.transform.mProps.r.v += 2;
  requestAnimationFrame(rotate);
}

rotate();

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

Anchor point и смещение центра трансформации

Anchor point определяет точку, относительно которой применяются все трансформации. Изменение этой точки влияет на поведение позиции, масштаба и вращения.

Смещение anchor point

layer.transform.mProps.a.v = [50, 50];

Смещение центра трансформации позволяет изменять поведение объекта без изменения его позиции на сцене.

Влияние anchor point на вращение

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

layer.transform.mProps.a.v = [100, 0];
layer.transform.mProps.r.v += 10;

Матрицы трансформаций

Внутри Lottie все трансформации сводятся к матричным операциям. Каждый слой имеет матрицу, которая объединяет:

  • перенос (translation)
  • масштаб (scale)
  • вращение (rotation)
  • смещение anchor point

Комбинация этих операций формирует итоговое положение пикселей на экране.

Упрощённая модель:

M = T × R × S × A

где:

  • T — матрица перемещения
  • R — матрица вращения
  • S — масштаб
  • A — anchor offset

Инверсия трансформаций

Для получения локальных координат используется обратная матрица трансформации. Это необходимо при обработке взаимодействий с элементами.

const matrix = layer.transform.finalTransform;
const inverted = matrix.inverse();

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

Динамическая привязка к данным

Трансформации Lottie можно связывать с внешними данными, создавая реактивные анимации.

Пример привязки к значению прокрутки

window.addEventListener('scroll', () => {
  const value = window.scrollY * 0.5;
  layer.transform.mProps.p.v = [100, 100 + value];
});

Такой подход используется для синхронизации анимаций с интерфейсом страницы.

Ограничения изменения трансформаций

При работе с Lottie Web важно учитывать ряд технических ограничений:

  • Некоторые рендереры (Canvas, SVG) по-разному интерпретируют трансформации
  • Изменение значений не всегда сохраняется при наличии keyframes
  • Векторные слои могут пересчитываться при каждом кадре
  • JSON-структура может быть оптимизирована, скрывая часть параметров

Приоритет вычислений трансформаций

При наличии ключевых кадров и программного изменения значений применяется следующий порядок:

  1. Интерполяция keyframes
  2. Применение выражений (если поддерживаются)
  3. Программное переопределение через API
  4. Финальный рендер матрицы

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

Комбинирование нескольких трансформаций

Одновременное изменение позиции, масштаба и вращения позволяет формировать сложные анимационные сценарии:

function update() {
  const time = Date.now() * 0.002;

  layer.transform.mProps.p.v = [
    200 + Math.cos(time) * 50,
    200 + Math.sin(time) * 50
  ];

  layer.transform.mProps.r.v = time * 30;

  layer.transform.mProps.s.v = [
    100 + Math.sin(time) * 20,
    100 + Math.sin(time) * 20
  ];

  requestAnimationFrame(update);
}

update();

Работа с несколькими слоями

В сложных композициях трансформации применяются иерархически. Родительские слои влияют на дочерние:

const parent = anim.renderer.elements[0];
const child = anim.renderer.elements[1];

parent.transform.mProps.p.v = [100, 100];
child.transform.mProps.p.v = [20, 20];

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

Использование трансформаций для интерфейсной логики

Трансформации Lottie часто применяются не только для визуальных эффектов, но и для построения интерактивных элементов интерфейса:

  • индикаторы прогресса через scale
  • переключатели состояния через rotation
  • плавное перемещение UI-элементов через position
  • визуальная обратная связь через opacity

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

Оглавление