Программное изменение параметров

Работа с экземпляром Vivus после его создания строится вокруг изменения состояния анимации и частичного переопределения параметров через свойства объекта и повторную инициализацию. Библиотека не рассчитана на полноценное «реактивное» обновление всех опций на лету, однако предоставляет достаточно гибкий набор механизмов для управления поведением отрисовки SVG.

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

const svgAnim = new Vivus('my-svg', {
  type: 'delayed',
  duration: 200,
  start: 'autostart',
  dashGap: 10,
  animTimingFunction: Vivus.EASE
});

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

Управление прогрессом анимации

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

Установка кадра анимации

svgAnim.setFrameProgress(0.5);

Значение передаётся в диапазоне от 0 до 1, где:

  • 0 — SVG полностью скрыт (контуры не отрисованы)
  • 1 — SVG полностью отрисован

Это позволяет синхронизировать анимацию с внешними событиями: скроллом, таймлайном, пользовательским вводом.

Перезапуск и сброс состояния

svgAnim.reset();

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

svgAnim.play();

Запускает анимацию с текущего состояния (или с начала после reset).

svgAnim.stop();

Останавливает текущую анимацию, сохраняя прогресс.

Изменение логики воспроизведения

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

Скорость и длительность

Хотя duration задаётся при инициализации, в реальных сценариях используется пересоздание логики или ручная корректировка времени через повторную инициализацию.

Практический подход:

svgAnim.stop();

const newAnim = new Vivus('my-svg', {
  type: 'delayed',
  duration: 100, // ускорение
  start: 'manual'
});

newAnim.play();

Таким образом достигается динамическое изменение скорости анимации.

Модификация параметров через повторную инициализацию

Vivus не предоставляет универсального метода setOptions, поэтому изменение конфигурации обычно реализуется через пересоздание экземпляра.

Сохранение SVG-состояния

Перед повторной инициализацией важно учитывать текущее состояние DOM:

svgAnim.destroy();

const svgAnim = new Vivus('my-svg', {
  type: 'oneByOne',
  duration: 300,
  animTimingFunction: Vivus.EASE_OUT_BOUNCE
});

Метод destroy() освобождает привязки и сбрасывает внутренние состояния библиотеки.

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

Тип анимации влияет на способ отрисовки путей SVG:

  • delayed — последовательная отрисовка с задержками
  • oneByOne — поочередная прорисовка каждого пути
  • sync — одновременная анимация всех элементов

Динамическое изменение типа реализуется только через пересоздание:

function changeAnimationType(type) {
  svgAnim.destroy();

  return new Vivus('my-svg', {
    type,
    duration: 200
  });
}

let svgAnim = changeAnimationType('sync');
svgAnim = changeAnimationType('oneByOne');

Управление через внешние события

Программное изменение параметров часто связано с реакцией на интерфейсные события.

Привязка к скроллу

window.addEventListener('scroll', () => {
  const progress = window.scrollY / 1000;
  svgAnim.setFrameProgress(Math.min(1, progress));
});

SVG-анимация становится полностью управляемой внешней средой, где Vivus выступает как рендерер линии.

Привязка к времени

let start = performance.now();

function tick(time) {
  const progress = (time - start) / 3000;
  svgAnim.setFrameProgress(Math.min(1, progress));
  requestAnimationFrame(tick);
}

requestAnimationFrame(tick);

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

Изменение параметров отрисовки путей

Некоторые параметры влияют на визуальное поведение линий и могут быть переопределены только через пересоздание.

dashGap и визуальная плотность

svgAnim.destroy();

svgAnim = new Vivus('my-svg', {
  type: 'delayed',
  dashGap: 5
});

Меньшее значение dashGap создаёт более плотную линию, увеличенное — добавляет разрывы между сегментами.

animTimingFunction

Функция интерполяции задаёт характер движения:

svgAnim = new Vivus('my-svg', {
  animTimingFunction: Vivus.EASE_IN_OUT
});

Доступные варианты влияют на ускорение и замедление анимации по кривой времени.

Гибридное управление: Vivus + внешняя логика

Наиболее гибкий подход строится на разделении:

  • Vivus отвечает за отрисовку SVG-пути
  • Внешний код управляет прогрессом и параметрами

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

const state = {
  speed: 1
};

function updateAnimation() {
  const progress = (performance.now() * state.speed) % 3000 / 3000;
  svgAnim.setFrameProgress(progress);
  requestAnimationFrame(updateAnimation);
}

updateAnimation();

Изменение state.speed мгновенно влияет на поведение анимации без пересоздания экземпляра.

Ограничения программного изменения

При работе с Vivus важно учитывать архитектурные ограничения:

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

Поэтому основная стратегия управления строится вокруг трёх механизмов:

  • setFrameProgress для точного контроля состояния
  • play / stop / reset для управления жизненным циклом
  • destroy + new Vivus() для изменения конфигурации

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

Оглавление