Управление через клики

Для управления Lottie-анимацией через взаимодействие с интерфейсом используется привязка экземпляра анимации к DOM-элементу и последующая работа с его API. Библиотека lottie-web создаёт объект анимации, который хранит текущее состояние проигрывания, кадры и методы управления.

import lottie from "lottie-web";

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

Экземпляр animation становится основным управляющим объектом. Через него выполняются команды воспроизведения, остановки и перехода между кадрами.

Базовая привязка клика к управлению состоянием

Наиболее распространённый сценарий — переключение состояния воспроизведения по клику на контейнер анимации или любой связанный DOM-элемент.

const container = document.getElementById("lottie");

let isPlaying = false;

container.addEventListener("click", () => {
  if (isPlaying) {
    animation.pause();
  } else {
    animation.play();
  }
  isPlaying = !isPlaying;
});

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

Переключение через проверку текущего кадра

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

container.addEventListener("click", () => {
  const currentFrame = animation.currentFrame;
  const totalFrames = animation.totalFrames;

  if (currentFrame >= totalFrames - 1) {
    animation.goToAndPlay(0, true);
  } else {
    animation.pause();
  }
});

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

Использование переключателя состояния через классы интерфейса

Часто управление кликом связывается не напрямую с анимацией, а через состояние интерфейса. DOM-элемент получает класс, отражающий текущее состояние.

const button = document.getElementById("toggle");

button.addEventListener("click", () => {
  const isActive = button.classList.contains("active");

  if (isActive) {
    animation.stop();
  } else {
    animation.play();
  }

  button.classList.toggle("active");
});

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

Перемотка анимации по клику

Lottie предоставляет возможность управления конкретными кадрами, что позволяет реализовать интерактивную перемотку.

container.addEventListener("click", () => {
  animation.goToAndStop(30, true);
});

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

Переключение направления воспроизведения

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

let direction = 1;

container.addEventListener("click", () => {
  direction *= -1;
  animation.setDirection(direction);
  animation.play();
});

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

Управление сегментами через клики

Lottie поддерживает воспроизведение отдельных сегментов, что особенно эффективно в интерактивных интерфейсах.

container.addEventListener("click", () => {
  animation.playSegments([0, 45], true);
});

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

Переключение состояний с учётом завершения анимации

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

let locked = false;

container.addEventListener("click", () => {
  if (locked) return;

  locked = true;

  animation.play();

  animation.addEventListener("complete", () => {
    locked = false;
  });
});

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

Интерактивное управление скоростью через клики

Клик может переключать скорость воспроизведения, изменяя восприятие динамики анимации.

let fast = false;

container.addEventListener("click", () => {
  fast = !fast;
  animation.setSpeed(fast ? 2 : 1);
});

Изменение скорости используется для создания эффектов ускорения взаимодействия без изменения самой анимации.

Связка нескольких элементов управления

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

document.getElementById("play").addEventListener("click", () => {
  animation.play();
});

document.getElementById("pause").addEventListener("click", () => {
  animation.pause();
});

document.getElementById("reset").addEventListener("click", () => {
  animation.stop();
});

Такая структура характерна для интерфейсов с явным разделением управляющих действий.

Синхронизация кликов и состояния анимации

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

const state = {
  playing: false
};

container.addEventListener("click", () => {
  if (state.playing) {
    animation.pause();
    state.playing = false;
  } else {
    animation.play();
    state.playing = true;
  }
});

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

Управление кликами внутри SVG-рендера

При использовании renderer: "svg" возможно назначение кликов не только на контейнер, но и на внутренние элементы SVG, если требуется более детальная интерактивность.

document.querySelector("#lottie svg").addEventListener("click", (e) => {
  animation.goToAndPlay(10, true);
});

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

Оглавление