Рендеринг текстовых элементов в Lottie Web основан на данных, экспортируемых из After Effects через плагин Bodymovin. Текст в итоговом JSON представляется не как готовая растровая графика, а как описание текстового слоя с набором параметров, которые интерпретируются движком Lottie при отрисовке. Это позволяет частично сохранять редактируемость текста, но накладывает ограничения на доступные стилистические возможности.
Текстовый слой в Lottie описывается объектом t, внутри
которого находятся параметры документа текста (d) и
свойства слоя. Основная структура включает:
t.d.k.t — строка текстаt.d.k.f — шрифт (font family)t.d.k.s — размер шрифтаt.d.k.fc — цвет заливки (fill color)t.d.k.sc — цвет обводки (stroke color)t.d.k.sw — толщина обводки (stroke width)t.d.k.lh — межстрочный интервал (line height)t.d.k.tr — трекинг (tracking, межбуквенное
расстояние)Дополнительно присутствуют параметры выравнивания и трансформации текстового блока, которые определяют поведение текста в контейнере слоя.
Цветовые параметры в Lottie Web задаются в формате RGB с нормализованными значениями от 0 до 1. Наиболее важные свойства:
fc — fill color, основной цвет символовsc — stroke color, цвет обводкиsw — stroke width, толщина контураКомбинация заливки и обводки позволяет создавать визуально сложные текстовые эффекты без использования внешних изображений. Однако поддержка смешанных режимов наложения ограничена рендерером Canvas или SVG.
Особенность Lottie заключается в том, что цвет текста не всегда может быть переопределён напрямую через API после рендера, поскольку он часто зашит в структуру композиции.
Шрифтовая система Lottie Web опирается на наличие шрифтов в окружении браузера. В JSON указывается только имя шрифта, например:
fontFamily: "Roboto"f: "Inter"Если шрифт отсутствует в системе пользователя, происходит автоматический fallback на ближайший доступный аналог, что может привести к изменению метрик текста и смещению анимации.
Ключевая проблема стилизации текста в Lottie связана с отсутствием полноценного встраивания шрифтов. В отличие от SVG с embedded fonts или Canvas с загрузкой через FontFace API, Lottie не гарантирует идентичность рендеринга между устройствами.
Практический подход заключается в предварительной загрузке шрифтов через CSS:
@font-face {
font-family: "Inter";
src: url("/fonts/Inter.woff2") format("woff2");
}После чего Lottie автоматически использует доступный шрифт по совпадению имени.
Трекинг (tr) и межстрочный интервал (lh)
являются ключевыми инструментами типографической настройки текста внутри
анимации.
tr влияет на расстояние между символамиlh управляет вертикальным ритмом многострочного
текстаЭти параметры особенно важны при анимации появления текста, поскольку любое изменение метрик приводит к перерасчёту позиционирования слоёв.
Lottie Web не поддерживает сложные типографические системы вроде OpenType features (лигатуры, контекстные альтернативы), поэтому визуальный контроль ограничен базовыми параметрами.
Выравнивание текста задаётся через объект a, который
определяет горизонтальное и вертикальное позиционирование:
Выравнивание влияет на origin трансформации текстового слоя. Это важно при анимации scale и position, так как центр трансформации может смещаться относительно визуального центра строки.
Lottie Web предоставляет ограниченные возможности изменения текстового содержимого после загрузки анимации. На уровне API это реализуется через доступ к внутренним элементам рендера.
Наиболее распространённый механизм основан на обновлении текстового слоя через renderer:
const anim = lottie.loadAnimation({
container: document.getElementById("anim"),
renderer: "svg",
loop: true,
autoplay: true,
path: "data.json"
});
anim.addEventListener("DOMLoaded", () => {
const textLayers = anim.renderer.elements;
textLayers.forEach((el) => {
if (el.data && el.data.t) {
el.updateDocumentData({ t: "Новый текст" });
}
});
});Метод updateDocumentData используется
Bodymovin-структурами для пересборки текстового узла. Однако этот способ
зависит от внутренней реализации рендерера и может отличаться между
версиями Lottie.
Текст в Lottie может быть анимирован по ключевым параметрам:
Каждое свойство может иметь keyframes, экспортированные из After Effects. При этом текстовые символы не всегда являются независимыми объектами — часто они группируются в единый shape layer после экспорта, особенно при использовании опции “Convert to outlines”.
При включённой конвертации в контуры теряется возможность изменения текста, но повышается предсказуемость рендера.
При экспорте через Bodymovin существует режим преобразования текста в векторные контуры. Это приводит к следующим последствиям:
Стилизация в этом режиме выполняется как работа с shape paths, а не с
текстовыми параметрами. Это исключает использование fc,
sc, f и других текстовых атрибутов.
Большая часть стилизации текста формируется на этапе композиции в After Effects. Lottie Web лишь интерпретирует результат экспорта.
Поддерживаются:
Text Animators особенно важны, поскольку позволяют создавать посимвольные эффекты, которые затем преобразуются в keyframes внутри JSON.
Несмотря на наличие множества параметров, текстовая система Lottie имеет ряд архитектурных ограничений:
SVG-рендерер обеспечивает более предсказуемое качество текста, тогда как Canvas может страдать от сглаживания и различий в метриках.
При работе с текстом в Lottie Web применяются устойчивые паттерны:
Такие подходы позволяют снизить расхождения между исходной анимацией и её отображением в браузере.
Режим рендера влияет на итоговую стилизацию:
Выбор рендера определяет, насколько точно будут соблюдены параметры
tracking, lineHeight и цветовые настройки.
При изменении масштаба анимации текст ведёт себя в зависимости от типа слоя:
Это приводит к необходимости фиксировать scale композиции на этапе дизайна, чтобы избежать расхождений в типографике.
При анимации цветовых и пространственных свойств текста используется линейная интерполяция. Например, переход цвета заливки происходит по компонентам RGB отдельно.
Трекинг и opacity также интерполируются плавно, но могут давать визуальные артефакты при резких изменениях ключевых кадров, особенно в Canvas-режиме.
Такая модель ограничивает возможность сложных типографических эффектов, характерных для CSS-анимаций, но обеспечивает предсказуемость поведения внутри Lottie-движка.