Trim Paths

Trim Paths — механизм частичного отображения контуров (paths) в векторной анимации. Позволяет динамически «обрезать» линию, задавая диапазон её видимой части. В основе лежит управление параметрами начала, конца и смещения сегмента пути.

В контексте Lottie Web Trim Paths интерпретируется из JSON-структуры, экспортированной из After Effects, и применяется к shape-слоям с векторными контурами.

Основные параметры

Start (Начало)

Определяет процент, с которого начинается отображение пути.

  • Диапазон: 0–100
  • Значение 0 — начало пути
  • Значение 50 — отображение начинается с середины

End (Конец)

Определяет процент, до которого отображается путь.

  • Диапазон: 0–100
  • Значение 100 — полный путь
  • Значение 50 — отображается только первая половина

Offset (Смещение)

Сдвигает диапазон отображения вдоль пути.

  • Диапазон: обычно -360° – 360°
  • Используется для создания эффекта движения по кругу

Визуальная логика

Путь рассматривается как нормализованный сегмент от 0% до 100%. Параметры Start и End задают видимую часть:

  • Start = 0, End = 100 → весь путь видим
  • Start = 0, End = 0 → путь невидим
  • Start = 0, End = 50 → первая половина
  • Start = 50, End = 100 → вторая половина

При анимации этих значений создаётся эффект рисования линии.

Типы применения

1. Индивидуальное применение (Individually)

Каждый path внутри shape-группы обрабатывается отдельно.

Особенности:

  • Анимация применяется к каждому контуру независимо
  • Подходит для сложных иллюстраций с множеством линий

2. Групповое применение (Simultaneously)

Все пути обрабатываются как единое целое.

Особенности:

  • Общая длина рассчитывается для всей группы
  • Эффект выглядит как единая линия

Представление в JSON (Lottie)

Пример структуры Trim Paths:

{
  "ty": "tm",
  "s": { "k": 0 },
  "e": { "k": 100 },
  "o": { "k": 0 },
  "m": 1
}

Расшифровка:

  • ty: "tm" — тип: Trim Paths

  • s — Start

  • e — End

  • o — Offset

  • m — режим:

    • 1 — Individually
    • 2 — Simultaneously

Анимация параметров

Каждый параметр может быть анимирован через keyframes.

Пример анимации «рисования линии»:

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

Результат:

  • В момент времени t=0 линия не видна
  • К t=60 линия полностью прорисована

Алгоритм отрисовки в Lottie Web

  1. Получение массива точек пути
  2. Вычисление общей длины пути
  3. Преобразование процентов Start/End в реальные длины
  4. Определение сегмента отображения
  5. Отрисовка только выбранного участка

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

Работа с кривыми Безье

Пути в Lottie состоят из сегментов:

  • Линейные
  • Кривые (Bezier curves)

При Trim Paths:

  • Длина кривой рассчитывается численно
  • Путь разбивается на мелкие сегменты
  • Определяется точка обрезки

Это может влиять на производительность при сложных формах.

Особенности Offset

Offset не изменяет длину отображаемого сегмента, а только сдвигает его.

Пример:

  • Start = 0
  • End = 25
  • При изменении Offset создаётся эффект движения короткого сегмента вдоль пути

Используется для:

  • имитации движения
  • циклических индикаторов
  • анимации загрузки

Ограничения и нюансы

1. Замкнутые пути

Для замкнутых контуров:

  • Начало и конец соединены
  • Offset даёт эффект вращения

2. Направление пути

Trim Paths зависит от порядка точек:

  • Обратный порядок → инвертированная анимация
  • В After Effects направление можно изменить

3. Stroke vs Fill

Trim Paths работает только с:

  • Stroke (обводка)

Не влияет на:

  • Fill (заливку)

Производительность

Факторы нагрузки:

  • Количество точек в пути
  • Количество одновременно анимируемых Trim Paths
  • Частота кадров

Оптимизация:

  • Уменьшение количества точек
  • Использование Simultaneously вместо Individually (где возможно)
  • Избегание чрезмерной детализации

Практические паттерны

1. Эффект «рисования»

Анимация:

  • Start = 0
  • End: 0 → 100

Используется для:

  • логотипов
  • иллюстраций
  • подписей

2. Бегущая линия

Анимация:

  • Start: 0 → 75
  • End: 25 → 100

Создаёт движущийся сегмент

3. Круговой индикатор

  • Замкнутый круг
  • Анимация Offset

Применение:

  • загрузка
  • прогресс

Интеграция в Lottie Web

Пример использования:

lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: animationData
});

Trim Paths автоматически обрабатывается, если присутствует в JSON.

Взаимодействие с другими эффектами

Stroke Width

Изменение толщины линии усиливает визуальный эффект Trim Paths.

Dash Array

В сочетании с пунктиром создаёт сложные анимации:

  • движущиеся штрихи
  • прерывистые линии

Transform

Комбинация с поворотом и масштабом усиливает динамику.

Ошибки и диагностика

Линия не отображается

Причины:

  • Start >= End
  • Stroke отключён
  • Нулевая длина пути

Анимация выглядит «рваной»

Причины:

  • слишком мало сегментов кривой
  • резкие keyframes без easing

Неправильное направление

Решение:

  • изменить порядок точек в After Effects

Внутренняя реализация (SVG renderer)

В SVG Trim Paths реализуется через:

  • stroke-dasharray
  • stroke-dashoffset

Пример:

stroke-dasharray: 1000;
stroke-dashoffset: 500;

Где:

  • dasharray — длина пути
  • dashoffset — смещение

Lottie вычисляет эти значения динамически.

Сравнение с Canvas renderer

  • SVG:

    • точное управление
    • поддержка dash-offset

  • Canvas:

    • пересчёт сегментов вручную
    • выше нагрузка при сложных формах

Кейсы использования

  • Анимация логотипов
  • Интерактивные индикаторы
  • UI-элементы загрузки
  • Иллюстрации с эффектом «рисования»

Практика оптимизации

  • Упрощение paths перед экспортом
  • Использование минимального количества keyframes
  • Проверка в разных renderers (SVG / Canvas)

Связь с After Effects

Trim Paths создаётся через:

  • Add → Trim Paths

Экспортируется через Bodymovin:

  • параметры полностью сохраняются
  • поддержка keyframes
  • переносится режим (Individually / Simultaneously)

Влияние easing

Плавность анимации зависит от интерполяции keyframes:

  • Linear → равномерное рисование
  • Ease In/Out → ускорение и замедление

В JSON это задаётся кривыми Безье интерполяции.

Композиционные эффекты

Комбинация нескольких Trim Paths:

  • последовательная прорисовка
  • сложные маршруты
  • layered animation

Используется в:

  • инфографике
  • UI-анимациях
  • storytelling-графике
Оглавление