Текстовые элементы в Lottie представляют собой результат экспорта из Adobe After Effects через плагин Bodymovin. Внутри JSON-структуры анимации текст хранится не как статический SVG или DOM-узел, а как отдельный тип слоя с описанием параметров рендеринга.
Основная структура текстового слоя включает:
t — содержимое текстового узлаf — имя шрифтаs — размер шрифтаfc — цветj — выравниваниеlh — межстрочный интервалsw, sc — параметры обводкиa — дополнительные трансформации текстаПосле инициализации анимации Lottie Web преобразует эти данные в внутренние объекты рендера, которые уже не всегда напрямую связаны с исходным JSON.
Ключевая особенность: текстовые слои не являются DOM-элементами, а существуют внутри canvas/SVG/WebGL-рендера, что определяет способы их изменения.
Текст в Lottie делится на две категории:
Основная сложность заключается в том, что после запуска анимации текстовые данные распределяются по внутренним структурам рендерера и становятся частью вычисленного состояния сцены.
Наиболее прямой способ изменения текстового содержимого основан на доступе к внутреннему рендереру Lottie Web.
После создания экземпляра анимации через
lottie.loadAnimation становится доступен объект анимации,
внутри которого содержатся слои рендера.
Типовая структура доступа:
animation.renderer.elements — массив визуальных
элементовTextElement или
аналогичную реализацию в зависимости от версии рендерераКаждый текстовый элемент содержит метод обновления документа:
textElement.updateDocumentData({ t: "новый текст" });Этот метод обновляет внутреннюю модель текста без необходимости перезапуска анимации.
В некоторых версиях используется прямое обновление свойства:
textElement.textProperty.currentData.t = "новое значение";
textElement.textProperty.updateDocumentData();Поведение зависит от версии lottie-web и типа рендерера (canvas или SVG).
Так как Lottie не предоставляет официального стабильного API для прямого доступа к слоям, текстовые элементы извлекаются через обход внутренней структуры:
renderer.elementsTextElementupdateDocumentDataОбщая логика поиска:
animation.renderer.elements.forEach(el => {
if (el.updateDocumentData && el.textProperty) {
el.updateDocumentData({ t: "обновлённый текст" });
}
});В сложных анимациях текст может быть вложен в группы, что требует рекурсивного обхода дерева элементов.
Другой фундаментальный способ изменения текста заключается в
редактировании JSON-структуры до передачи её в
lottie.loadAnimation.
В этом случае текст изменяется на уровне исходных данных:
animationData.layers.forEach(layer => {
if (layer.td && layer.t) {
layer.t.d.k.forEach(textKeyframe => {
textKeyframe.s.t = "новый текст";
});
}
});Здесь:
layer.td указывает на текстовый слойd.k содержит ключевые кадры текстаs.t хранит строковое значениеТакой подход гарантирует предсказуемость, поскольку текст сразу становится частью анимационной модели до рендера.
При экспорте из After Effects текст может быть настроен как динамический через выражения или параметры контроллеров.
В Lottie Web это отражается в JSON как:
exprВ таких случаях текст может зависеть от внешнего состояния и обновляться при изменении данных анимации.
Пример логики:
Одним из критических свойств Lottie Web является возможность обновления визуальных элементов без повторной загрузки JSON.
Механизм обновления включает:
После вызова updateDocumentData или аналогичного
метода:
Текстовая система имеет ряд архитектурных ограничений:
Также важной особенностью является то, что изменение текста не всегда приводит к перерасчёту геометрии слоя, если он заранее зафиксирован в композиции.
Разные рендереры Lottie Web обрабатывают текст по-разному.
<text> элементыCanvasRenderingContext2DSVG-режим обеспечивает более прозрачную структуру текста, тогда как Canvas даёт более высокую производительность при сложных сценах.
Многострочные текстовые блоки в Lottie кодируются через:
lh — line height\r или \nИзменение текста с переносами требует сохранения структуры форматирования, иначе может нарушиться компоновка слоя.
Пример обновления:
textElement.updateDocumentData({
t: "Первая строка\nВторая строка"
});При этом расчёт высоты блока зависит от параметров шрифта и межстрочного интервала.
Текстовые элементы строго зависят от доступности шрифтов:
В Lottie Web отсутствует автоматическая система замены шрифтов с сохранением точной геометрии, что влияет на предсказуемость изменения текстового контента.
При изменении текста внутренний рендерер выполняет:
В сложных композициях с масками и parent-constraints изменение текста может приводить к изменению всей сцены, так как текст влияет на геометрию слоя.
Распространённая архитектура заключается в связывании текстовых слоёв с внешними данными:
В этом случае обновление текста реализуется как синхронизация
состояния и Lottie-слоя через повторное применение
updateDocumentData или полное обновление JSON-структуры
слоя.
Такой подход позволяет рассматривать текстовые элементы как реактивные узлы внутри анимационной сцены, несмотря на отсутствие встроенной реактивной системы в Lottie Web.