Анимация линий

Anime.js предоставляет мощные возможности для создания плавных и гибких анимаций в JavaScript. Для анимации линий чаще всего используются SVG-пути (<path>), линии (<line>), полилинии (<polyline>) и контуры (<polygon>). Основная идея заключается в манипуляции атрибутами stroke-dasharray и stroke-dashoffset, которые позволяют «рисовать» линию постепенно.

Подготовка SVG для анимации

Чтобы линия выглядела анимированной, необходимо правильно задать свойства:

<svg width="400" height="200">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
        stroke="black" stroke-width="2" fill="transparent"/>
</svg>

Ключевые моменты:

  • fill="transparent" — предотвращает заливку фигуры.
  • stroke и stroke-width задают вид линии.
  • d определяет путь линии, который будет анимироваться.

Для анимации линию необходимо подготовить, вычислив её полную длину:

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

path.style.strokeDasharray = pathLength;
path.style.strokeDashoffset = pathLength;
  • strokeDasharray равен длине линии, чтобы весь путь состоял из одного сегмента.
  • strokeDashoffset определяет смещение начальной точки. При полном смещении линия становится невидимой.

Анимация с помощью anime.js

Базовая анимация линии выполняется с использованием anime() и изменения strokeDashoffset от полной длины до нуля:

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

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

  • targets — элементы DOM, к которым применяется анимация.
  • strokeDashoffset — массив [начальное, конечное].
  • duration — продолжительность анимации в миллисекундах.
  • easing — функция плавности (можно использовать 'linear', 'easeInOutQuad', 'spring' и др.).
  • loop — задаёт цикличность анимации.

Создание эффекта «рисования» сложных фигур

Для многоступенчатых анимаций можно использовать timeline, позволяющий последовательно анимировать несколько линий или сегментов:

const path1 = document.querySelector('#path1');
const path2 = document.querySelector('#path2');

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

timeline
  .add({
    targets: path1,
    strokeDashoffset: [path1.getTotalLength(), 0]
  })
  .add({
    targets: path2,
    strokeDashoffset: [path2.getTotalLength(), 0]
  });

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

  • Позволяет объединять несколько анимаций в последовательность.
  • Каждой анимации можно задавать offset для синхронизации с другими эффектами.

Анимация линий с дополнительными эффектами

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

anime({
  targets: path,
  strokeDashoffset: [pathLength, 0],
  stroke: ['#FF0000', '#0000FF'],
  strokeWidth: [2, 5],
  duration: 2500,
  easing: 'easeInOutQuart'
});
  • Одновременная анимация цвета и толщины линии создаёт эффект «живой» линии.
  • Можно использовать массивы для плавного перехода между несколькими значениями.

Управление анимацией

Anime.js предоставляет методы управления анимацией в процессе её выполнения:

const animation = anime({
  targets: path,
  strokeDashoffset: [pathLength, 0],
  duration: 2000,
  easing: 'linear',
  autoplay: false
});

animation.play();    // запуск
animation.pause();   // пауза
animation.restart(); // перезапуск
animation.seek(1000); // переход к определённой позиции в миллисекундах
  • autoplay: false позволяет запускать анимацию вручную.
  • seek() удобен для создания интерактивных анимаций, связанных с прокруткой или событиями мыши.

Сложные техники: паттерны и последовательности

  1. Множественные линии с задержкой:
anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 2000,
  delay: anime.stagger(500) // задержка между линиями
});
  • anime.setDashoffset автоматически вычисляет длину пути для каждого <path>.
  • anime.stagger() создаёт каскадный эффект анимации.
  1. Анимация с повторением и обратным воспроизведением:
anime({
  targets: path,
  strokeDashoffset: [pathLength, 0],
  direction: 'alternate',
  loop: true,
  duration: 1500,
  easing: 'easeInOutSine'
});
  • direction: 'alternate' заставляет линию «рисоваться» и «стирается» обратно.
  • Цикличное повторение создаёт бесконечный эффект движения.

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

  • Для сложных SVG с множеством линий рекомендуется использовать requestAnimationFrame совместно с anime.js для синхронизации с перерисовкой браузера.
  • Минимизировать количество DOM-элементов и использовать группы <g> для объединения линий.
  • Для повторяющихся анимаций применять loop и direction, чтобы избежать лишних пересозданий объектов.

Итоговый эффект

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

Эти техники являются основой профессиональной работы с анимацией SVG в современных веб-интерфейсах.

Оглавление