Текстовые слои и их свойства

Текстовый слой в Lottie описывается как специализированный объект, предназначенный для хранения и воспроизведения текстовой информации, экспортированной из After Effects через Bodymovin. В отличие от растровых или векторных слоёв, текст в Lottie сохраняет семантическую структуру: строку, параметры шрифта, стилизацию и набор аниматоров, влияющих на поведение символов.

Базовая структура текстового слоя находится внутри ключа t. Основной контейнер включает описание строки, шрифта, размеров, выравнивания и параметров декорации текста.

{
  "ty": "t",
  "t": {
    "d": {
      "k": [
        {
          "s": {
            "sz": [500, 200],
            "ps": [0, 0],
            "t": "Пример текста",
            "f": "Roboto-Regular",
            "s": 48,
            "fc": [0, 0, 0],
            "j": 0,
            "tr": 0,
            "lh": 58,
            "ls": 0
          }
        }
      ]
    }
  }
}

Основные параметры текстового содержимого

Ключевая часть текстового слоя сосредоточена внутри объекта s, который описывает статическое состояние текста.

t (text) Строковое значение, представляющее содержимое слоя. Поддерживаются Unicode-символы, включая кириллицу, эмодзи (при наличии шрифта) и специальные знаки.

f (font family) Имя шрифта, экспортированное из After Effects. В Lottie Web это не системный шрифт, а ссылка на описание в разделе fonts. При отсутствии шрифта происходит fallback на системный рендеринг или замена.

s (size) Размер шрифта в пикселях. В отличие от CSS, значение фиксировано и не адаптируется к контейнеру без дополнительной анимации.

fc (fill color) Цвет заливки текста в формате нормализованного RGB массива:

"fc": [1, 0, 0]

значение соответствует красному цвету.

lh (line height) Межстрочный интервал. Используется при многострочном тексте и влияет на вертикальное расстояние между базовыми линиями строк.

ls (letter spacing) Межбуквенный интервал. Может быть как положительным, так и отрицательным, что позволяет создавать плотные или разреженные наборы символов.

j (justification) Выравнивание текста:

  • 0 — левое
  • 1 — центр
  • 2 — правое
  • 3 — полное выравнивание (justify)

tr (tracking) Дополнительный параметр кернинга, влияющий на общий межсимвольный интервал.

Геометрия текстового слоя

Текстовый слой в Lottie всегда существует в рамках ограничивающего прямоугольника, определяемого параметром sz. Он задаёт область компоновки текста.

"sz": [600, 300]

Первое значение — ширина, второе — высота. Внутри этой области текст может переноситься, если включены многострочные режимы или превышена ширина строки.

Параметр ps (position) задаёт смещение текстового блока относительно якорной точки слоя. Он важен при центрировании и анимации появления текста.

Многострочный текст и переносы

Lottie не использует HTML-рендеринг, поэтому перенос строк реализуется через символ \r или \n внутри строки t.

"t": "Первая строка\\nВторая строка"

Поведение переноса зависит от параметра sz. Если ширина ограничена, движок Bodymovin выполняет автоматический перенос на основе измерения текста и текущего шрифта.

Анимируемые свойства текстового слоя

Текстовые слои поддерживают анимацию на двух уровнях:

  1. Анимация всего текстового блока
  2. Анимация отдельных символов через text animators

Анимация базового слоя

Любой текстовый слой может содержать стандартные трансформации:

  • позиция
  • масштаб
  • вращение
  • прозрачность

Эти параметры находятся вне объекта t и работают аналогично обычным слоям.

Text Animators и диапазонные селекторы

Наиболее мощная часть системы текста в Lottie — текстовые аниматоры, перенесённые из After Effects. Они позволяют управлять отдельными символами или диапазонами текста.

Основная структура:

"a": {
  "a": 1,
  "r": 1,
  "o": {
    "k": 100
  },
  "s": {
    "k": 0
  },
  "p": {
    "k": [0, 0, 0]
  }
}

Range Selector

Range Selector управляет областью воздействия анимации:

"r": {
  "p": {
    "k": 0
  },
  "s": {
    "k": 0
  },
  "e": {
    "k": 100
  }
}
  • s — start (начало диапазона)
  • e — end (конец диапазона)
  • p — offset (смещение диапазона)

Диапазон задаётся в процентах по символам текста.

Анимация прозрачности символов

Часто используемый параметр — opacity (o). Он позволяет создавать эффекты появления текста по буквам.

"o": {
  "a": 1,
  "k": [
    { "t": 0, "s": [0] },
    { "t": 20, "s": [100] }
  ]
}

Каждый символ может изменять прозрачность независимо, что используется для эффектов набора текста, fade-in и морфинга строк.

Позиционные искажения текста

Параметр p внутри text animator управляет смещением символов:

"p": {
  "a": 1,
  "k": [20, -10, 0]
}

Это позволяет создавать эффекты:

  • волны текста
  • случайное смещение символов
  • кинетическую типографику

Масштабирование символов

Параметр s отвечает за масштаб отдельных символов.

"s": {
  "a": 1,
  "k": [120, 120, 100]
}

Первое и второе значение управляют шириной и высотой, третье — глубиной (используется редко, но присутствует в структуре AE экспорта).

Кривые и интерполяция текстовых анимаций

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

  • линейная
  • bezier
  • hold

Пример ключевых кадров:

"k": [
  { "t": 0, "s": [0], "e": [100] },
  { "t": 10, "s": [100] }
]

Интерполяция влияет на плавность появления текста, особенно при по-символьной анимации.

Связь текстового слоя с ресурсами шрифтов

Каждый текстовый слой ссылается на глобальный объект fonts, где описаны метаданные шрифтов:

"fonts": {
  "list": [
    {
      "fName": "Roboto-Regular",
      "fFamily": "Roboto",
      "fStyle": "Regular",
      "ascent": 75
    }
  ]
}

Если шрифт отсутствует, Lottie Web может:

  • заменить шрифт системным
  • некорректно отобразить кернинг
  • изменить ширину текста

Особенности рендеринга в Lottie Web

В браузерной реализации текстовый слой не превращается в DOM-элемент. Он рендерится через Canvas или SVG в зависимости от конфигурации.

Это приводит к следующим особенностям:

  • невозможность выделения текста
  • отсутствие системного line-wrap алгоритма браузера
  • фиксированная привязка к измерениям из AE
  • зависимость от точности метрик шрифта

Ограничения текстовых слоёв

Текстовые слои в Lottie имеют ряд ограничений по сравнению с веб-типографикой:

  • отсутствует поддержка CSS-стилей
  • нет динамической адаптации к контейнеру
  • ограниченная поддержка сложных OpenType-фич
  • невозможность интерактивного редактирования
  • зависимость от корректного экспорта из After Effects

Управление текстом через Lottie Web API

В runtime возможно частичное управление текстом через обновление анимации:

anim.renderer.elements.forEach(el => {
  if (el.data.ty === 5) {
    el.updateDocumentData({ t: "Новый текст" });
  }
});

Изменение текста требует пересчёта геометрии слоя, так как размеры символов и переносы зависят от строки.

Практические особенности сложных текстовых анимаций

При работе с большими текстовыми слоями критично учитывать:

  • количество символов напрямую влияет на производительность
  • text animators увеличивают нагрузку на рендер
  • сложные диапазоны selectors замедляют расчёт кадров
  • частая смена текста требует повторного измерения layout

При высокой плотности анимаций предпочтительнее использовать ограниченные диапазоны или заранее подготовленные состояния текста.

Оглавление