Логирование состояния анимаций

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

Методы отслеживания прогресса

В anime.js каждая анимация создаётся с помощью функции anime() и возвращает объект анимации, который можно использовать для логирования. Основные методы отслеживания:

  1. update Позволяет выполнять функцию на каждом кадре анимации. Это основной способ логировать текущее состояние анимации в реальном времени.

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

    const animation = anime({
  targets: '.box',
  translateX: 250,
  duration: 2000,
  update: function(anim) {
    console.log(`Текущая позиция: ${anim.animations[0].currentValue}`);
    console.log(`Прогресс: ${anim.progress}%`);
  }
});

    Здесь anim.animations[0].currentValue возвращает текущее значение свойства, а anim.progress — общий процент завершения анимации.

  2. begin и complete События begin и complete логируют старт и окончание анимации соответственно. Это удобно для регистрации событий и триггеров:

    const animation = anime({
  targets: '.circle',
  scale: 2,
  duration: 1500,
  begin: function() { console.log('Анимация началась'); },
  complete: function() { console.log('Анимация завершена'); }
});

  3. loop и direction При циклических анимациях можно логировать количество повторов и направление движения:

    const animation = anime({
  targets: '.line',
  translateX: 300,
  direction: 'alternate',
  loop: 3,
  update: function(anim) {
    console.log(`Текущий цикл: ${Math.floor(anim.currentTime / anim.duration) + 1}`);
    console.log(`Направление: ${anim.direction}`);
  }
});

Работа с прогрессом анимации

anime.js предоставляет удобные свойства для детального анализа:

  • anim.currentTime — текущее время анимации в миллисекундах.
  • anim.progress — процент завершения (0–100).
  • anim.completed — булево значение, показывает, завершена ли анимация.
  • anim.reversed — булево значение, показывает, идет ли анимация в обратном направлении.

Пример комбинированного логирования:

const animation = anime({
  targets: '.square',
  rotate: '1turn',
  duration: 3000,
  update: function(anim) {
    console.log(`Время: ${anim.currentTime} мс`);
    console.log(`Прогресс: ${anim.progress.toFixed(2)}%`);
    console.log(`Завершена: ${anim.completed}`);
  }
});

Использование пользовательских функций для логирования

Можно создавать вспомогательные функции для централизованного логирования нескольких анимаций. Это особенно важно при комплексных интерфейсах с множеством элементов:

function logState(anim, name) {
  console.log(`[${name}] Прогресс: ${anim.progress.toFixed(2)}%, Время: ${anim.currentTime} мс`);
}

const anim1 = anime({
  targets: '.box1',
  translateX: 200,
  duration: 2000,
  update: function(anim) { logState(anim, 'box1'); }
});

const anim2 = anime({
  targets: '.box2',
  translateY: 150,
  duration: 3000,
  update: function(anim) { logState(anim, 'box2'); }
});

Логирование сложных последовательностей

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

const tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 1000,
  update: function(anim) {
    console.log(`Общий прогресс timeline: ${anim.progress.toFixed(2)}%`);
  }
});

tl.add({ targets: '.circle', translateX: 100 })
  .add({ targets: '.circle', translateY: 50 })
  .add({ targets: '.circle', scale: 2 });

Свойство anim.progress в timeline.update отражает прогресс всей последовательности, а не отдельной анимации.

Важные рекомендации

  • Минимизировать вывод в консоль на каждом кадре для сложных анимаций, иначе может снизиться производительность. Лучше логировать с использованием интервалов или при значимых событиях.
  • Для анализа нескольких свойств элемента использовать anim.animations, который хранит массив анимаций с текущими значениями и целевыми значениями.
  • Логирование позволяет выявить рассинхронизации при одновременных анимациях нескольких объектов и корректировать тайминги.

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

Оглавление