Экспрессии в After Effects представляют собой JavaScript-подобный язык, выполняющий вычисления на этапе рендера композиции. При экспорте через Bodymovin эти выражения не всегда транслируются в эквивалентную логику Lottie JSON. В результате часть поведения теряется, часть упрощается, а часть приводит к некорректному рендерингу или полному игнорированию анимации.
Ключевая проблема заключается в различии сред исполнения: After Effects выполняет выражения в собственной системе композиции, тогда как Lottie Web интерпретирует уже готовое JSON-представление, не имеющее полноценного движка выражений.
Большинство ошибок при работе с экспрессиями связано с тем, что Lottie не интерпретирует After Effects expressions напрямую. Вместо этого происходит попытка конвертации значений в статические ключевые кадры или упрощённые зависимости.
Основные ограничения:
time, valueAtTime, comp() и
подобные функции не транслируютсяЭкспрессия, завязанная на временную шкалу композиции, может превратиться в фиксированное значение на момент экспорта. Это создаёт эффект «замороженной логики».
Ошибки, связанные с экспрессиями, проявляются в Lottie Web в виде характерных паттернов:
Особенно часто проблема возникает при использовании выражений для параметров трансформации и эффекта wiggle.
Плагин Bodymovin выполняет статический анализ композиции и конвертирует её в JSON. Любая логика, требующая исполнения в реальном времени, либо вычисляется заранее, либо отбрасывается.
Основные причины деградации:
При невозможности преобразования выражение может быть заменено последним вычисленным значением.
Файл Lottie JSON становится единственным источником истины при отладке. Экспрессии как таковые в нём отсутствуют, поэтому анализируется результат их вычисления.
Ключевые структуры:
layers — структура сценыks — трансформации (position, scale, rotation,
opacity)a, p, s, r,
o — анимируемые свойстваkeyframes — дискретные значения во времениОтсутствие ожидаемых keyframes указывает на то, что выражение не было корректно преобразовано.
Пример проблемного фрагмента:
"p": {
"a": 0,
"k": [100, 100]
}Ожидание динамического поведения при этом не реализуется, поскольку параметр стал статическим.
Lottie Web предоставляет базовые механизмы наблюдения за состоянием анимации через события экземпляра.
Ключевые события:
loaded_imagesDOMLoadedcompleteloopCompleteenterFrameЧерез обработчики возможно отслеживание момента, когда анимация теряет синхронизацию.
const anim = lottie.loadAnimation({
container: document.getElementById('anim'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json'
});
anim.addEventListener('enterFrame', (e) => {
console.log(e.currentTime, e.direction);
});При анализе поведения экспрессий полезно сопоставлять время и изменения параметров, особенно при расхождении с исходной композицией.
Одним из методов диагностики является постепенное исключение слоёв с выражениями из композиции.
Подход:
Особенно эффективно отключение выражений на:
Если после удаления выражения поведение стабилизируется, проблема локализуется в конкретной логике AE.
Некоторые выражения частично поддерживаются за счёт предварительного вычисления в момент экспорта:
valueНе поддерживаются:
wiggle()loopOut()thisComp.layertime,
posterizeTime)Даже если экспрессия не вызывает ошибок в AE, это не гарантирует её корректную сериализацию в Lottie JSON.
Функция wiggle() является одной из наиболее проблемных.
Она генерирует псевдослучайные колебания во времени, что требует
runtime-движка.
После экспорта возможны варианты:
В Lottie Web отсутствует механизм воспроизведения псевдослучайности в реальном времени без заранее рассчитанных значений.
При анализе подозрительных анимаций используется сравнение значений на разных кадрах.
Методика:
enterFrameЕсли значения остаются неизменными при изменении времени, экспрессия не была конвертирована в анимацию.
Параметры трансформации чаще других страдают от потери логики:
Это связано с тем, что Bodymovin оптимизирует композицию, объединяя выражения в статические значения при возможности.
Сложные выражения необходимо постепенно редуцировать:
Пример упрощения:
Исходное выражение:
value + wiggle(2, 20) * Math.sin(time)Упрощённая форма:
value + 10Постепенное возвращение логики позволяет выявить точку потери совместимости с Lottie.
Lottie Web рендерит анимации через SVG или Canvas, что позволяет использовать стандартные инструменты DevTools:
transformПри SVG-рендерере изменения координат можно отслеживать напрямую через DOM-атрибуты.
Расхождения между AE и Lottie часто связаны с различием таймингов:
requestAnimationFrameЭто приводит к:
Особенно заметно при сложных выражениях, завязанных на
time.
Изолированная сцена позволяет точно определить поведение экспрессии:
Если поведение корректно в минимальной сцене, но ломается в полной композиции, причина заключается в взаимодействии слоёв или конфликте параметров после экспорта.
Оптимизация при экспорте может изменять структуру данных:
Эти процессы направлены на уменьшение размера JSON, но часто приводят к потере динамики.
Сравнение поведения выполняется по следующим параметрам:
Любое расхождение указывает на стадию, на которой выражение было утеряно: вычисление, экспорт или рендеринг.
Некоторые выражения могут работать «частично корректно»:
Это связано с тем, что часть значений вычисляется на этапе экспорта, а часть игнорируется при отсутствии полной модели времени.
Наиболее сложные ошибки возникают при:
Такие конструкции не имеют эквивалента в Lottie JSON и почти всегда теряют логику при экспорте.
Для стабильного поведения в Lottie:
При этом сохраняется предсказуемость рендера в Lottie Web, поскольку отсутствует необходимость интерпретировать runtime-логику After Effects.