Событие segmentStart

Назначение события segmentStart в Lottie Web

В Lottie Web событие segmentStart относится к группе событий жизненного цикла анимации и срабатывает в момент начала воспроизведения заданного сегмента. Сегменты используются для проигрывания части таймлайна анимации, ограниченной конкретным диапазоном кадров.

Событие фиксирует переход анимации в состояние воспроизведения нового диапазона, независимо от того, был ли он установлен вручную через API или инициирован внутренней логикой (например, при зацикливании сегментов).

Сегменты в контексте Lottie-анимации

Перед пониманием поведения segmentStart важно учитывать модель сегментов в Lottie:

  • Анимация представляет собой временную шкалу с кадрами
  • Сегмент задаётся парой значений: [startFrame, endFrame]
  • Воспроизведение может быть ограничено одним или несколькими сегментами
  • Переход между сегментами может быть программным или автоматическим

Типичный запуск сегмента осуществляется через API:

animation.playSegments([10, 60], true);

В этом случае Lottie Web переключает внутренний диапазон проигрывания и инициирует соответствующее событие segmentStart.

Механизм возникновения segmentStart

Событие возникает в следующих сценариях:

  • запуск нового сегмента через playSegments
  • переход к следующему сегменту при последовательном воспроизведении
  • повторный старт сегмента при включённом цикле
  • программный reset сегмента с повторным запуском

Внутри движка Lottie происходит:

  1. Установка текущего диапазона кадров
  2. Обнуление или перенастройка внутреннего времени воспроизведения
  3. Инициализация проигрывания с начального кадра сегмента
  4. Генерация события segmentStart

Подписка на событие segmentStart

Событие доступно через стандартный механизм событий анимации:

const animation = lottie.loadAnimation({
  container: document.getElementById('box'),
  renderer: 'svg',
  loop: true,
  autoplay: false,
  path: 'animation.json'
});

animation.addEventListener('segmentStart', (event) => {
  console.log('Старт сегмента');
});

Событие может быть снято аналогично другим событиям:

animation.removeEventListener('segmentStart', handler);

Структура объекта события

Объект события segmentStart содержит контекст текущего состояния анимации на момент старта сегмента. Обычно доступны следующие данные:

  • type — строка события, равная "segmentStart"
  • target или animation — ссылка на экземпляр анимации
  • текущий сегмент (в зависимости от версии библиотеки)
  • параметры воспроизведения (speed, direction)

Пример обработки:

animation.addEventListener('segmentStart', (e) => {
  console.log(e.type); // segmentStart
  console.log(e.animation);
});

Взаимодействие с playSegments

Наиболее частый источник события — метод playSegments.

animation.playSegments([0, 100], true);

Поведение:

  • сегмент [0, 100] устанавливается как активный
  • анимация сбрасывается к началу диапазона
  • воспроизведение стартует
  • генерируется segmentStart

При последовательном вызове:

animation.playSegments([0, 50], true);
animation.playSegments([50, 120], true);

каждый вызов инициирует отдельный segmentStart, так как происходит смена диапазона.

Цепочки сегментов и сегментированное воспроизведение

Lottie Web допускает сценарии, в которых сегменты образуют цепочку:

  • сегмент A → сегмент B → сегмент C
  • каждый переход сопровождается segmentStart
  • возможна автоматизация через события complete

Пример:

animation.addEventListener('complete', () => {
  animation.playSegments([100, 200], true);
});

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

Поведение при loop и direction

При включённом зацикливании поведение segmentStart сохраняется:

animation.loop = true;
animation.playSegments([0, 80], true);

Каждый новый цикл сегмента сопровождается повторным срабатыванием события.

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

animation.setDirection(-1);
animation.playSegments([80, 0], true);

segmentStart фиксирует старт даже при обратном воспроизведении, так как событие связано с началом сегмента, а не направлением движения.

Синхронизация с внутренним временем анимации

Сегменты в Lottie Web не являются отдельными сущностями таймлайна, а представляют собой ограничения глобального времени.

При запуске segmentStart:

  • внутренний clock сбрасывается к startFrame
  • вычисляется offset относительно общего таймлайна
  • обновляется текущая позиция playback head

Это важно для сложных сценариев, где несколько анимаций синхронизируются по времени.

Практические сценарии использования

Управление UI-переходами

segmentStart часто используется для синхронизации интерфейсных переходов:

  • начало появления модального окна
  • запуск анимации загрузки
  • переключение состояний кнопок
animation.addEventListener('segmentStart', () => {
  document.body.classList.add('is-animating');
});

Построение анимационных состояний

Сегменты применяются как состояния:

  • idle
  • hover
  • active
  • success

Каждое состояние представляет отдельный диапазон кадров.

function setState(state) {
  const segmentsMap = {
    idle: [0, 30],
    hover: [30, 60],
    active: [60, 120]
  };

  animation.playSegments(segmentsMap[state], true);
}

segmentStart фиксирует переход между состояниями, что позволяет синхронизировать внешнюю логику.

Аналитика и трекинг анимаций

Событие может использоваться для сбора статистики:

  • сколько раз запускается сегмент
  • какие состояния наиболее частые
  • длительность пребывания в сегментах
animation.addEventListener('segmentStart', (e) => {
  sendAnalytics({
    event: 'segment_start',
    timestamp: Date.now()
  });
});

Отличия segmentStart от других событий

Lottie Web содержит несколько близких событий:

  • enterFrame — каждый кадр анимации
  • loopComplete — завершение цикла
  • complete — завершение проигрывания
  • segmentStart — начало сегмента

Ключевое отличие segmentStart:

  • фиксирует не прогресс, а переход состояния
  • привязан к диапазону кадров
  • возникает до начала фактического проигрывания сегмента

Особенности поведения в разных рендерах

SVG renderer

  • событие синхронизировано с DOM-обновлением
  • segmentStart может предшествовать первому изменению path

Canvas renderer

  • событие возникает до отрисовки первого кадра сегмента
  • важна синхронизация с requestAnimationFrame

HTML renderer

  • segmentStart связан с изменениями DOM-структуры
  • может сопровождаться мгновенной перестройкой слоёв

Типичные ошибки при работе с segmentStart

Множественные подписки

Повторная регистрация обработчика без удаления приводит к дублированию реакции:

animation.addEventListener('segmentStart', handler);
animation.addEventListener('segmentStart', handler);

Неправильное использование playSegments

Передача некорректных значений:

animation.playSegments([100, 0], true);

может приводить к неожиданной логике старта сегмента в зависимости от версии библиотеки.

Конфликт с autoplay

Если autoplay включён одновременно с программным управлением сегментами, segmentStart может срабатывать в неожиданные моменты и не соответствовать пользовательскому ожиданию состояния.

Роль segmentStart в архитектуре анимаций

В архитектурных схемах Lottie Web segmentStart выступает как точка синхронизации:

  • переключение состояний UI
  • запуск аудиовизуальных эффектов
  • координация нескольких анимационных слоёв
  • управление сценариями взаимодействия

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

Оглавление