Выражения и их представление

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

Выражения в After Effects — это вычисляемые инструкции, привязанные к свойствам анимации: позиции, масштабу, прозрачности, цвету и любым параметрам эффектов. Они позволяют:

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

Типичный пример выражения:

wiggle(2, 30)

или зависимость одного слоя от другого:

thisComp.layer("Controller").transform.position

Однако ключевой момент заключается в том, что выражения не являются частью конечной анимационной модели Lottie.

Как Lottie воспринимает выражения

При экспорте через Bodymovin (плагин, формирующий JSON для Lottie), выражения не транслируются напрямую. Вместо этого происходит предварительное вычисление значений в After Effects.

Процесс можно описать так:

  1. After Effects интерпретирует выражение в реальном времени.
  2. На каждом кадре вычисляется итоговое значение свойства.
  3. Bodymovin считывает уже готовые численные результаты.
  4. Эти значения записываются в JSON как ключевые кадры или статические параметры.

Таким образом, в структуре Lottie-файла выражений не существует — остаются только результаты их вычисления.

Представление данных в JSON

Внутри Lottie JSON выражения не представлены отдельной сущностью. Вместо этого используются:

  • k — ключевые кадры или значение свойства;
  • массивы чисел для статических параметров;
  • интерполяционные данные.

Пример позиции слоя:

"p": {
  "a": 0,
  "k": [100, 200]
}

Если бы это значение было результатом выражения, оно всё равно попало бы сюда уже вычисленным.

Для анимации:

"p": {
  "a": 1,
  "k": [
    {
      "t": 0,
      "s": [0, 0],
      "e": [100, 100]
    }
  ]
}

Никакой информации о логике вычисления в JSON не сохраняется.

Ограничения экспорта выражений

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

Не поддерживаются:

  • time-зависимые функции в виде кода;
  • wiggle(), loopOut(), random() как логика;
  • ссылки на другие композиции вне статического расчёта;
  • условия и ветвления, влияющие на динамическое поведение в runtime.

Причина проста: движок Lottie Web является интерпретатором уже готового описания анимации, а не средой исполнения выражений.

Что происходит с выражениями при экспорте Bodymovin

Плагин Bodymovin действует как «компилятор» анимации:

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

Если выражение зависит от времени:

time * 50

то результатом в JSON станет последовательность значений:

"k": [
  {"t": 0, "s": 0},
  {"t": 1, "s": 50},
  {"t": 2, "s": 100}
]

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

Косвенные способы имитации выражений

Несмотря на отсутствие прямой поддержки, поведение выражений можно частично воспроизвести:

1. Предварительная анимация в After Effects

Все вычисления переносятся в этап дизайна. Используются:

  • выражения для генерации движения;
  • затем bake (запекание) в keyframes;
  • последующий экспорт.

2. Использование повторяемых циклов

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

3. Слои-контроллеры

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

Почему Lottie не поддерживает runtime-выражения

Архитектура Lottie ориентирована на предсказуемость и производительность в браузере:

  • JSON должен быть статичным;
  • рендеринг должен быть детерминированным;
  • вычисления должны быть минимальными;
  • анимация должна одинаково воспроизводиться на всех платформах.

Если бы выражения исполнялись в runtime, это нарушило бы:

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

Поэтому логика выражений переносится на этап авторинга.

Поведение Lottie Web при интерполяции данных

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

  • линейная интерполяция;
  • bezier-кривые;
  • ступенчатые переходы (hold keyframes).

Это создаёт эффект «живой» анимации без необходимости вычислять выражения.

Пример:

{
  "t": 0,
  "s": [0, 0],
  "e": [100, 100],
  "i": {"x": [0.33], "y": [0.33]},
  "o": {"x": [0.67], "y": [0.67]}
}

Хотя в After Effects это может быть результатом сложного выражения, в Lottie остаётся только математическая кривая.

Практическое значение отсутствия выражений

Отсутствие выражений в runtime приводит к важным последствиям:

  • невозможно изменять поведение анимации программно на уровне AE-логики;
  • все динамические эффекты должны быть заранее рассчитаны;
  • взаимодействие с пользователем ограничено внешними API Lottie Web;
  • любые «интеллектуальные» эффекты требуют JavaScript-обвязки поверх JSON.

Замещение выражений в веб-окружении

Если требуется динамическое поведение, используется слой поверх рендера:

  • управление прогрессом анимации через API;
  • изменение speed, direction;
  • переключение анимационных состояний;
  • подмена JSON-фрагментов.

Пример управления:

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

anim.setSpeed(2);
anim.goToAndStop(50, true);

Таким образом логика выражений переносится из AE в JavaScript-уровень.

Структурная роль выражений в пайплайне

Выражения занимают промежуточное положение:

  • они существуют в авторской среде;
  • влияют на генерацию данных;
  • исчезают в финальной поставке.

В пайплайне Lottie:

Expression → Evaluation in AE → Keyframes → JSON → Lottie Web rendering

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

Оглавление