Анимация stroke и fill

В библиотеке anime.js анимация свойств SVG, таких как stroke и fill, реализуется через ключевые параметры strokeDasharray, strokeDashoffset, fill и CSS-подобные свойства. Это позволяет создавать динамичные визуальные эффекты, например, эффект прорисовки линий или плавное изменение цвета заливки.

Анимация stroke: эффект прорисовки линий

Эффект прорисовки линии достигается сочетанием свойств strokeDasharray и strokeDashoffset:

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',
  loop: true
});

Разбор кода:

  • path.getTotalLength() возвращает длину SVG-пути.
  • strokeDasharray задаёт длину штриха и промежутков, совпадая с длиной пути.
  • strokeDashoffset отвечает за смещение штриха; анимация от полной длины к нулю создаёт эффект прорисовки.
  • easing контролирует темп анимации, loop — её повторение.

Анимация fill: плавное изменение цвета

Свойство fill анимируется напрямую через CSS-значения цвета:

anime({
  targets: 'circle',
  fill: ['#FF0000', '#00FF00', '#0000FF'],
  duration: 3000,
  easing: 'linear',
  direction: 'alternate',
  loop: true
});

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

  • Цвета указываются в массиве для последовательной анимации.
  • direction: 'alternate' обеспечивает возврат к исходному цвету после анимации.
  • Любой CSS-совместимый цвет (hex, rgb, rgba) может использоваться в качестве значения.

Одновременная анимация stroke и fill

Для комплексных эффектов можно анимировать одновременно stroke и fill:

anime({
  targets: 'rect',
  strokeDashoffset: [anime.setDashoffset, 0],
  stroke: ['#000', '#FF6600'],
  fill: ['#FFF', '#FFCC00'],
  duration: 4000,
  easing: 'easeInOutQuad',
  loop: true
});
  • anime.setDashoffset автоматически устанавливает текущее значение strokeDashoffset.
  • Одновременная анимация нескольких свойств позволяет создавать эффект «заливающейся и прорисовывающейся фигуры».
  • Любые SVG-элементы (path, rect, circle, polygon) поддерживают такие анимации.

Контроль синхронизации через timeline

Для сложных сцен анимации удобно использовать timeline:

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

tl.add({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0]
})
.add({
  targets: 'path',
  fill: ['#FFFFFF', '#FF0000']
}, '-=500'); // старт на 500 мс раньше конца предыдущей анимации

Преимущества timeline:

  • Позволяет точно синхронизировать несколько эффектов.
  • '-=500' задаёт перекрытие анимаций для плавного перехода.
  • Можно комбинировать свойства stroke, fill, opacity, scale и другие CSS/SVG-свойства.

Использование функций для динамических значений

Свойства stroke и fill могут задаваться через функции для получения уникальных значений на каждом элементе:

anime({
  targets: 'circle',
  fill: function(el, i) {
    return `hsl(${i * 60}, 80%, 50%)`;
  },
  strokeDashoffset: [anime.setDashoffset, 0],
  duration: 2500,
  loop: true
});
  • Функция принимает элемент и его индекс, что позволяет создавать градиентные или разноцветные эффекты.
  • Особенно полезно при анимации групп SVG-элементов с разными цветами или скоростями прорисовки.

Советы по оптимизации

  1. Использовать will-change: stroke-dashoffset, fill для ускорения рендеринга.
  2. Избегать анимации сложных path с сотнями точек, если нужна высокая производительность.
  3. Комбинировать stroke и fill с transform и opacity, чтобы получить более выразительные эффекты.
  4. Применять easing-функции (easeInOutSine, easeOutQuad) для создания естественной динамики.

Примеры эффектов

  • Прорисовка логотипа: плавная анимация контура с последующей заливкой цвета.
  • Пульсирующая фигура: изменение fill с одновременным прорисовыванием stroke.
  • Радужные анимации: использование HSL-цветов через функции для градиентного эффекта.

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

Оглавление