Логирование и диагностика

Логирование событий анимации в Vivus строится вокруг отслеживания жизненного цикла SVG-анимации: инициализации, поэтапного отрисовывания пути и завершения. Библиотека не навязывает встроенную систему логов, поэтому диагностика реализуется через колбэки, обёртки над методами и стандартные инструменты браузера.

Основные точки, в которых возможно подключение диагностики:

  • момент создания экземпляра Vivus
  • готовность SVG-структуры к анимации
  • каждый шаг отрисовки пути
  • завершение анимации
  • принудительное прерывание или сброс

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

const instance = new Vivus('svg-id', {
  duration: 200,
  type: 'delayed',
  onReady: function (vivus) {
    console.log('SVG загружен и готов к анимации');
  }
});

onReady фиксирует момент, когда DOM-элемент проанализирован, а пути SVG уже преобразованы в структуру, пригодную для анимации.

Диагностика по кадрам анимации

Для наблюдения за прогрессом используется метод setFrame и внутренний цикл отрисовки. Хотя библиотека не предоставляет прямого публичного onFrame, поведение можно отслеживать через переопределение или обёртку step логики.

Расширенный подход диагностики:

const original = Vivus.prototype.setFrame;

Vivus.prototype.setFrame = function (frame) {
  console.log('Текущий кадр:', frame, 'из', this.duration);
  return original.call(this, frame);
};

Такой подход позволяет фиксировать:

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

Логирование состояния SVG-путей

SVG-анимация Vivus зависит от корректной подготовки путей: stroke-dasharray и stroke-dashoffset должны быть вычислены точно. Ошибки на этом уровне часто приводят к отсутствию видимой анимации.

Для диагностики состояния путей используется инспекция DOM:

const paths = document.querySelectorAll('#svg-id path');

paths.forEach((path, index) => {
  const length = path.getTotalLength();
  console.log(`Путь ${index}: длина =`, length);
  console.log('stroke-dasharray:', path.style.strokeDasharray);
  console.log('stroke-dashoffset:', path.style.strokeDashoffset);
});

Контроль этих значений позволяет выявлять:

  • некорректные path (нулевая длина)
  • отсутствующие атрибуты stroke
  • ошибки экспорта SVG из графических редакторов

Отслеживание завершения анимации

Vivus поддерживает callback завершения, который используется как ключевая точка фиксации состояния.

const instance = new Vivus('svg-id', {
  duration: 150,
  onReady: function () {
    console.log('Инициализация завершена');
  }
}, function () {
  console.log('Анимация полностью завершена');
});

Этот callback полезен для:

  • измерения фактического времени выполнения
  • фиксации завершённых сцен
  • синхронизации с внешними анимациями

Перехват внутренних ошибок

Vivus не генерирует сложную систему исключений, однако ошибки чаще возникают на уровне:

  • отсутствующего SVG-элемента
  • некорректного ID контейнера
  • повреждённой структуры path

Для диагностики применяется обёртка создания экземпляра:

try {
  const instance = new Vivus('svg-id', {
    duration: 200
  });
} catch (e) {
  console.error('Ошибка инициализации Vivus:', e);
}

Дополнительно полезно проверять существование элемента до создания:

const el = document.getElementById('svg-id');
console.log('SVG найден:', !!el);

Инструментирование внутренних методов

Глубокая диагностика достигается через патчинг прототипа. Основные методы, которые часто анализируются:

  • play
  • stop
  • reset
  • finish
  • setFrame

Пример логирования управления состоянием:

const methods = ['play', 'stop', 'reset', 'finish'];

methods.forEach(method => {
  const original = Vivus.prototype[method];

  Vivus.prototype[method] = function () {
    console.log(`Вызов метода: ${method}`);
    return original.apply(this, arguments);
  };
});

Такой слой диагностики позволяет отслеживать:

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

Диагностика производительности

SVG-анимация чувствительна к количеству узлов и сложности путей. Для измерения нагрузки используется performance.now().

const start = performance.now();

const instance = new Vivus('svg-id', {
  duration: 300,
  onReady: function () {
    const end = performance.now();
    console.log('Время инициализации:', end - start, 'мс');
  }
});

Дополнительно анализируется частота кадров через внешний цикл:

let last = performance.now();

function measure() {
  const now = performance.now();
  console.log('Δ времени кадра:', now - last);
  last = now;
  requestAnimationFrame(measure);
}

requestAnimationFrame(measure);

Это позволяет выявлять:

  • просадки FPS при сложных SVG
  • перегрузку DOM-операциями
  • блокировки основного потока

Контроль состояния через внешние флаги

Для построения расширенной диагностики удобно вводить собственную модель состояния:

const debugState = {
  frames: [],
  startedAt: null,
  finishedAt: null
};

const instance = new Vivus('svg-id', {
  duration: 200,
  onReady: function () {
    debugState.startedAt = performance.now();
  }
}, function () {
  debugState.finishedAt = performance.now();
  console.log('Общее время:', debugState.finishedAt - debugState.startedAt);
});

Такой подход формирует основу для:

  • построения профиля анимации
  • сравнения разных SVG
  • анализа деградации производительности

Анализ SVG-структуры до анимации

Перед запуском Vivus полезно инспектировать DOM-структуру SVG:

const svg = document.getElementById('svg-id');
const paths = svg.querySelectorAll('path');

console.log('Количество путей:', paths.length);

paths.forEach(p => {
  if (!p.getAttribute('d')) {
    console.warn('Путь без атрибута d обнаружен');
  }
});

Это выявляет типичные проблемы экспорта:

  • пустые path
  • группы без геометрии
  • вложенные трансформации, влияющие на длину пути

Диагностические сценарии при динамическом SVG

При подгрузке SVG через AJAX или вставке в DOM после инициализации требуется учитывать асинхронность:

fetch('/icon.svg')
  .then(r => r.text())
  .then(svg => {
    document.getElementById('container').innerHTML = svg;

    console.log('SVG вставлен в DOM');

    new Vivus('svg-id', {
      duration: 180
    });
  });

Основная проблема диагностики в таких сценариях — несинхронный доступ к DOM. Проверка готовности элемента становится обязательной частью логирования.

Поведение при повторных запусках

Vivus не всегда очищает состояние автоматически при повторной инициализации. Для диагностики важно отслеживать повторное использование одного и того же узла:

let instance = new Vivus('svg-id', { duration: 100 });

instance.stop();
instance.reset();

console.log('Состояние сброшено');

Контроль этих переходов позволяет выявлять:

  • утечки состояния анимации
  • неконсистентность stroke-offset
  • наложение нескольких инстансов на один SVG
Оглавление