StrokeDashoffset и strokeDasharray

В анимации SVG линии и контуры играют ключевую роль для создания динамических эффектов. Свойства strokeDasharray и strokeDashoffset позволяют управлять визуальным отображением обводки, создавая эффект «рисования линии» или динамических штрихов на кривых и контурах.

Свойство strokeDasharray

strokeDasharray определяет шаблон штрихов и пробелов вдоль линии. Оно принимает значение в виде числа или массива чисел, где каждый элемент задаёт длину штриха или промежутка.

Примеры значений:

  • stroke-dasharray="5" — штрих длиной 5 единиц, затем пробел 5 единиц (по умолчанию повторяется).
  • stroke-dasharray="5 10" — штрих 5, пробел 10, штрих 5, пробел 10 и так далее.
  • stroke-dasharray="5 10 2 4" — можно задавать сложные повторяющиеся последовательности.

В JavaScript через anime.js изменение strokeDasharray выглядит так:

anime({
  targets: 'circle',
  strokeDasharray: [0, 200],
  duration: 2000,
  easing: 'easeInOutSine'
});

Здесь [0, 200] задаёт анимацию от полностью невидимой линии до полной длины 200 единиц, создавая эффект постепенного появления линии.

Свойство strokeDashoffset

strokeDashoffset сдвигает начало штрихового рисунка вдоль линии. По сути, это смещение шаблона, заданного strokeDasharray. Анимация этого свойства позволяет создавать эффект «движущейся линии» или «перекатывающихся штрихов».

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

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

Функция anime.setDashoffset автоматически определяет полную длину линии SVG и задаёт начальное смещение так, чтобы линия выглядела невидимой перед началом анимации. После этого смещение анимируется до нуля, создавая эффект рисования контура.

Взаимодействие strokeDasharray и strokeDashoffset

На практике эти свойства часто используют вместе. strokeDasharray задаёт видимую структуру линии, а strokeDashoffset управляет её смещением. Например, можно создать эффект непрерывно движущейся линии по контуру:

anime({
  targets: 'path',
  strokeDasharray: '150 100',
  strokeDashoffset: [0, 250],
  loop: true,
  easing: 'linear',
  duration: 3000
});

Здесь линия состоит из штрихов длиной 150 единиц и пробелов 100 единиц. Анимация смещения создаёт иллюзию движения штрихов вдоль пути.

Динамическое вычисление длины линии

Для плавных анимаций часто требуется вычислять длину линии в пикселях. В anime.js это делается с помощью anime.setDashoffset, которая позволяет автоматически подстраивать значения под конкретный путь:

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

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

Этот приём гарантирует, что анимация будет выглядеть одинаково на линиях любой длины.

Настройка кривой и ускорений

Для strokeDasharray и strokeDashoffset можно использовать любую стандартную функцию easing из anime.js:

  • linear — равномерное движение штрихов.
  • easeInOutSine — плавное ускорение и замедление.
  • easeOutQuad — быстрый старт с постепенным торможением.

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

anime({
  targets: 'line',
  strokeDasharray: [0, 400],
  strokeDashoffset: [400, 0],
  duration: 1800,
  easing: 'easeOutQuad'
});

Эффект: линия сначала резко появляется, затем медленно достраивается до полной длины.

Практические сценарии использования

  1. Рисование логотипа: анимировать контур SVG, чтобы логотип появлялся штрих за штрихом.
  2. Прогресс-бары: создавать динамические полосы с эффектом движения заполнения.
  3. Декоративные элементы: линии и рамки с непрерывным движением для интерактивных интерфейсов.
  4. Инфографика: анимированные графики и диаграммы с плавно появляющимися линиями.

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

  • Анимировать только свойства strokeDasharray и strokeDashoffset, избегая лишних transform-эффектов одновременно на сложных SVG, чтобы не перегружать рендер.
  • Для длинных и сложных путей использовать requestAnimationFrame через anime.js, что обеспечит плавность без рывков.
  • Объединять несколько линий в один элемент, если нужно синхронное движение, чтобы уменьшить количество DOM-элементов и нагрузку на браузер.

strokeDasharray и strokeDashoffset — ключевой инструмент для создания впечатляющих SVG-анимаций. Правильное сочетание этих свойств позволяет получать плавные эффекты рисования, движения и визуального акцента, полностью контролируемые через библиотеку anime.js.

Оглавление