Методы goToAndStop и goToAndPlay

В библиотеке Lottie Web ключевым объектом управления анимацией выступает экземпляр, возвращаемый функцией загрузки композиции. Именно он предоставляет доступ к методам навигации по временной шкале, среди которых особое значение имеют goToAndStop и goToAndPlay.

Обе функции позволяют переводить анимацию к заданному кадру или времени, но различаются поведением после перехода: остановкой или продолжением воспроизведения.

Модель времени в Lottie Web

Анимация в Lottie строится на временной шкале, где каждый кадр соответствует определённому моменту времени композиции. Управление может осуществляться:

  • в кадрах (frame-based mode)
  • во времени (time-based mode в секундах)

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

Метод goToAndStop

Метод goToAndStop переводит анимацию на указанный момент и полностью останавливает её воспроизведение.

Сигнатура

animation.goToAndStop(value, isFrame);

Параметры

  • value — целевая позиция на временной шкале

  • isFrame — логический флаг интерпретации значения:

    • true — значение рассматривается как кадр
    • false — значение рассматривается как время в секундах

Поведение метода goToAndStop

После вызова выполняется:

  1. Перемещение внутреннего таймлайна к заданной позиции
  2. Отрисовка текущего состояния композиции
  3. Полная остановка воспроизведения

Анимация остаётся в статичном состоянии до явного вызова методов управления (play, goToAndPlay, stop и др.).

Использование goToAndStop в контексте UI-сценариев

Метод применяется в ситуациях, где требуется фиксированное состояние анимации:

  • превью кадров интерфейса
  • статические иллюстрации из Lottie-композиции
  • синхронизация с пользовательским вводом
  • контрольные точки в обучающих интерфейсах

Пример использования goToAndStop (кадры)

import lottie from "lottie-web";

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

animation.goToAndStop(45, true);

В данном случае анимация переходит на 45-й кадр и фиксируется в этом состоянии.

Пример использования goToAndStop (время)

animation.goToAndStop(1.5, false);

Здесь позиция интерпретируется как 1.5 секунды от начала композиции.

Особенности поведения

Фиксация состояния

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

Отсутствие инерции

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

Совместимость с циклами

При включённом loop: true метод всё равно приводит анимацию в статическое состояние.

Метод goToAndPlay

Метод goToAndPlay выполняет аналогичное перемещение по временной шкале, но с последующим автоматическим продолжением воспроизведения.

Сигнатура

animation.goToAndPlay(value, isFrame);

Параметры

  • value — целевая позиция (кадр или время)
  • isFrame — режим интерпретации значения

Поведение метода goToAndPlay

После вызова выполняется последовательность:

  1. Перемещение на заданный кадр или время
  2. Обновление визуального состояния
  3. Немедленное продолжение воспроизведения с этой точки

Таким образом, метод используется для запуска анимации не с начала, а с произвольной позиции.

Сценарии применения goToAndPlay

Метод особенно полезен в следующих случаях:

  • повторный запуск анимации с середины
  • реализация интерактивных переходов
  • сегментированное воспроизведение композиции
  • реакция на пользовательские события (hover, click, scroll)

Пример использования goToAndPlay (кадры)

animation.goToAndPlay(120, true);

Анимация перемещается на 120-й кадр и продолжает проигрывание до конца композиции или до остановки.

Пример использования goToAndPlay (время)

animation.goToAndPlay(2.3, false);

Композиция начинает воспроизведение с позиции 2.3 секунды.

Сравнение goToAndStop и goToAndPlay

Поведение после перехода

  • goToAndStop — фиксирует состояние
  • goToAndPlay — запускает воспроизведение

Управление потоком анимации

  • первый метод используется для статичных состояний
  • второй — для динамического продолжения

Таблица различий

Характеристика goToAndStop goToAndPlay
Переход по времени да да
Остановка полная отсутствует
Запуск воспроизведения нет да
Использование в UI статичные состояния интерактивные сцены

Работа с кадрами и временем

Оба метода поддерживают два режима интерпретации параметра:

Режим кадров

Используется чаще всего, так как Lottie изначально оперирует frame-based структурой.

animation.goToAndStop(10, true);
animation.goToAndPlay(10, true);

Режим времени

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

animation.goToAndStop(0.75, false);
animation.goToAndPlay(0.75, false);

Взаимодействие с другими методами управления

play()

Запускает воспроизведение с текущей позиции. В отличие от goToAndPlay, не выполняет перемещения по таймлайну.

stop()

Полностью останавливает анимацию без изменения текущего кадра.

pause()

Фиксирует текущее состояние без сброса прогресса.

Отличие goToAndPlay от play()

Ключевое различие заключается в том, что goToAndPlay всегда изменяет позицию:

  • play() — продолжает с текущего кадра
  • goToAndPlay() — устанавливает новый кадр и запускает воспроизведение

Сценарии комбинированного использования

В сложных интерфейсах методы часто комбинируются:

  • переход к ключевой точке через goToAndStop
  • ожидание события
  • продолжение через goToAndPlay

Пример логики:

animation.goToAndStop(0, true);

// ожидание действия пользователя

animation.goToAndPlay(0, true);

Работа с интерактивными композициями

При создании интерактивных анимаций Lottie часто используется как управляемый таймлайн, где:

  • goToAndStop формирует состояния интерфейса
  • goToAndPlay обеспечивает переходы между состояниями

Такая модель применяется в:

  • onboarding-анимациях
  • UI-индикаторах
  • визуализации прогресса
  • микроинтеракциях кнопок

Ограничения и особенности реализации

Точность переходов

Перемещение происходит к ближайшему доступному кадру, если указано дробное значение в frame-режиме.

Зависимость от renderer

SVG, Canvas и HTML-рендереры могут незначительно различаться в производительности при резких переходах.

Асинхронная загрузка

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

Типичные ошибки при использовании

Вызов до инициализации

const animation = lottie.loadAnimation(...);

animation.goToAndPlay(50, true); // ошибка, если данные ещё не загружены

Несоответствие режима времени

Передача секунд при isFrame = true приводит к смещению в неожиданные кадры.

Управление сложными композициями

В много-сценарных анимациях методы позволяют реализовать систему состояний:

  • состояние A → фиксируется через goToAndStop
  • переход в состояние B → goToAndPlay

Такая модель заменяет необходимость внешнего state machine в простых интерфейсах.

Поведение при циклической анимации

При loop: true:

  • goToAndStop прерывает цикл
  • goToAndPlay продолжает цикл с указанной точки

При этом цикл не перезапускается автоматически, а продолжает текущее поведение композиции.

Синхронизация с пользовательскими событиями

Методы часто используются для привязки к событиям:

  • движение мыши
  • скролл страницы
  • наведение
  • клики

В таких сценариях таймлайн становится отражением состояния интерфейса, где:

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