Lottie – мощная библиотека, которая позволяет разработчикам легко интегрировать высококачественную анимацию в веб- и мобильные приложения. Одним из распространенных требований при использовании Lottie является выполнение определенных действий или запуск событий, когда анимация завершается. В этой статье мы рассмотрим различные методы обработки события завершения анимации в Lottie, а также приведем примеры кода для популярных фреймворков JavaScript, таких как React и Vue.js.

Метод 1: использование «завершенного» прослушивателя событий
Самый простой способ обработки события завершения анимации в Lottie — это присоединение прослушивателя событий к «завершенному» событию. Это событие срабатывает, когда анимация достигает конца. Вот пример на ванильном JavaScript:

const animation = lottie.loadAnimation({
  container: document.getElementById('animation-container'),
  path: 'animation.json',
});
animation.addEventListener('complete', () => {
  // Animation end event handler
  console.log('Animation has reached its end!');
});

Метод 2. Использование прослушивателя событий «loopComplete».
Если ваша анимация имеет циклическое поведение и вы хотите выполнять действия после каждого цикла, вы можете использовать событие «loopComplete». Это событие срабатывает в конце каждой итерации цикла. Вот пример:

const animation = lottie.loadAnimation({
  container: document.getElementById('animation-container'),
  path: 'animation.json',
  loop: true,
});
animation.addEventListener('loopComplete', () => {
  // Loop complete event handler
  console.log('Animation loop has completed!');
});

Метод 3. Использование Lottie API
Lottie предоставляет комплексный API, позволяющий управлять анимацией и манипулировать ею. Вы можете использовать этот API, чтобы определить, когда анимация завершилась. Вот пример использования Lottie API:

const animation = lottie.loadAnimation({
  container: document.getElementById('animation-container'),
  path: 'animation.json',
});
animation.addEventListener('DOMLoaded', () => {
  // DOMLoaded event fires when the animation is ready to play
  animation.play();
  // Detect animation end using the Lottie API
  animation.addEventListener('complete', () => {
    // Animation end event handler
    console.log('Animation has reached its end!');
  });
});

Обработка события завершения анимации в Lottie имеет решающее значение для добавления интерактивности и улучшения пользовательского опыта ваших приложений. В этой статье мы рассмотрели три метода достижения этой цели: использование «полного» прослушивателя событий, прослушивателя событий «loopComplete» и использование Lottie API. Применяя эти методы в своих проектах, вы можете создавать динамичные и увлекательные анимации с точным контролем их жизненного цикла.

Не забудьте при необходимости адаптировать примеры кода к вашему конкретному варианту использования и платформе. Приятной анимации с Лотти!