Работа с path-элементами

Библиотека anime.js предоставляет мощные возможности для анимации SVG-элементов, включая <path>. Path-анимация особенно полезна для создания эффектов рисования линий, следов движения объектов и сложных кривых переходов.

Основные свойства path-анимации

Для анимации <path> чаще всего используются свойства strokeDasharray и strokeDashoffset. Они позволяют контролировать видимую часть линии, создавая эффект постепенного «рисования» пути.

strokeDasharray — задаёт шаблон пунктирной линии. Для полной анимации path обычно используют длину пути:

const path = document.querySelector('path');
const length = path.getTotalLength();

path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;

strokeDashoffset — смещает начало штриха по длине пути. Анимация offset от length до 0 создаёт эффект рисования линии:

anime({
  targets: path,
  strokeDashoffset: [length, 0],
  duration: 2000,
  easing: 'easeInOutSine'
});

Использование getTotalLength()

Метод getTotalLength() позволяет получить точную длину path, что критично для корректного эффекта рисования. Он работает для любых кривых, включая Cubic Bezier и сложные комбинированные paths.

const path = document.querySelector('#myPath');
console.log(path.getTotalLength());

Использование этой длины для strokeDasharray и strokeDashoffset гарантирует плавное отображение всей линии без разрывов.

Анимация сложных path

Для анимации нескольких path можно использовать массив targets:

anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: anime.stagger(250)
});

Здесь anime.setDashoffset автоматически устанавливает strokeDashoffset в текущую длину path, что упрощает работу с множеством элементов. Использование anime.stagger() создаёт последовательное появление линий с заданным интервалом.

Morphing path

Anime.js позволяет анимировать изменение формы path с помощью свойства d:

anime({
  targets: '#path1',
  d: [
    { value: 'M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80' },
    { value: 'M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80' }
  ],
  duration: 2000,
  easing: 'easeInOutQuad',
  loop: true
});

Для корректного морфинга длина исходного и конечного path должна совпадать по числу сегментов и команд SVG. В противном случае могут возникнуть визуальные артефакты.

Комбинирование с другими анимациями

Path-анимацию удобно комбинировать с трансформациями объектов или изменением цвета:

anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  stroke: ['#ff0000', '#0000ff'],
  translateX: [0, 100],
  duration: 2500,
  easing: 'easeInOutCubic'
});

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

Анимация по кривой с motion path

С anime.js можно перемещать объекты по пути с использованием motion path plugin:

anime({
  targets: '.dot',
  translateX: anime.path('path')('x'),
  translateY: anime.path('path')('y'),
  rotate: anime.path('path')('angle'),
  duration: 3000,
  easing: 'linear',
  loop: true
});

anime.path() возвращает функции, вычисляющие координаты и угол поворота объекта по заданному path. Этот метод позволяет создавать сложные траектории движения с точным позиционированием.

Практические советы

  • Перед анимацией path всегда определять его длину через getTotalLength().
  • Для морфинга path необходимо, чтобы количество точек и команд SVG совпадало.
  • Использовать strokeDasharray и strokeDashoffset для эффекта «рисования» линии.
  • Комбинировать path-анимацию с transform и color для динамичных визуальных эффектов.
  • Для последовательной анимации множества path использовать anime.stagger().

Оптимизация производительности

  • Минимизировать количество path и сложность кривых для плавной анимации на мобильных устройствах.
  • Для повторяющихся анимаций использовать loop вместо постоянного пересоздания объектов.
  • Предварительно устанавливать strokeDasharray и strokeDashoffset через CSS или JavaScript, чтобы избежать мерцаний при старте анимации.

Anime.js позволяет создавать богатые, динамичные и сложные эффекты с path, обеспечивая полный контроль над линиями, формами и движением объектов в SVG.

Оглавление