Эффект рисования линий

Для создания эффекта рисования линий в anime.js используется комбинация SVG-элементов и свойств stroke-dasharray и stroke-dashoffset. Эти свойства позволяют визуально имитировать постепенное появление линии по мере анимации.

  • stroke-dasharray задаёт длину видимого штриха и промежутков.
  • stroke-dashoffset смещает начало штриха относительно пути линии.

Идея заключается в том, чтобы длина линии полностью совпадала с длиной пути (path), а stroke-dashoffset изменялся от полной длины до нуля, создавая эффект «рисования».

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

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

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

В этом примере:

  • getTotalLength() возвращает полную длину линии.
  • strokeDasharray = length делает линию полностью «штрихованной».
  • Анимация strokeDashoffset: [length, 0] постепенно открывает линию, создавая иллюзию рисования.

Анимация нескольких линий одновременно

Для последовательного или параллельного рисования нескольких линий используется массив объектов-таргетов. Можно управлять задержкой через параметр delay или функцию обратного вызова.

const paths = document.querySelectorAll('path');

paths.forEach(path => {
  const length = path.getTotalLength();
  path.style.strokeDasharray = length;
  path.style.strokeDashoffset = length;
});

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

Особенности:

  • anime.setDashoffset автоматически берёт длину линии, избавляя от ручного расчёта.
  • anime.stagger(200) создаёт последовательный эффект с задержкой между линиями.

Управление скоростью и кривизной движения

Параметр easing в anime.js определяет характер движения линии. Для плавного эффекта рисования идеально подходят:

  • 'linear' — равномерная скорость
  • 'easeInOutSine' — плавное ускорение и замедление
  • 'easeInOutQuad' — более выраженный динамический эффект

Длительность анимации (duration) контролирует общее время рисования линии, что особенно важно при длинных SVG-путях.

anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  duration: 3000,
  easing: 'easeInOutQuad'
});

Создание эффекта рисования с цветом

Эффект рисования можно усилить, комбинируя анимацию цвета линии с её появлением. Свойство stroke анимируется параллельно с strokeDashoffset.

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

Такой подход создаёт визуально динамичный переход цвета по мере появления линии.

Использование timeline для сложных анимаций

Для сложных последовательностей удобно применять anime.timeline(). Это позволяет комбинировать рисование линий с другими эффектами, например, масштабированием, поворотом или изменением прозрачности.

const tl = anime.timeline({
  easing: 'easeInOutSine',
  duration: 1500
});

tl.add({
  targets: 'path.line1',
  strokeDashoffset: [anime.setDashoffset, 0]
})
.add({
  targets: 'path.line2',
  strokeDashoffset: [anime.setDashoffset, 0]
}, '-=500') // начинает вторую линию за 500мс до окончания первой
.add({
  targets: 'circle',
  scale: [0, 1],
  opacity: [0, 1]
});

Особенности timeline:

  • Позволяет синхронизировать несколько анимаций.
  • Можно использовать отрицательные значения смещения для перекрытия эффектов.
  • Обеспечивает полное управление порядком и временными интервалами.

Практические рекомендации

  • Для сложных SVG с большим количеством линий рекомендуется использовать anime.setDashoffset вместо ручного вычисления длины, это упрощает код.
  • Настройка stroke-width и stroke-linecap влияет на визуальное восприятие эффекта рисования.
  • Комбинирование с opacity и fill позволяет создавать эффект постепенного появления не только контуров, но и заливки.
  • Использование stagger в комбинации с timeline даёт возможность создавать динамичные, последовательные иллюстрации, имитирующие процесс рисования от руки.

Эти подходы создают полностью управляемый и наглядный эффект «рисования линий», который легко интегрируется в интерактивные интерфейсы, презентации или визуальные истории на веб-страницах.

Оглавление