Морфинг path

Морфинг path в anime.js позволяет плавно анимировать переход одной SVG-фигуры в другую, изменяя атрибут d элементов . Этот приём широко используется для сложной графики и динамических интерфейсов, где необходимо создать впечатление «живой» формы.

Для работы с морфингом важно, чтобы обе SVG-фигуры имели одинаковое количество команд и совпадающий порядок точек. Несоблюдение этого правила приводит к некорректной анимации или её отсутствию.


  

anime({
  targets: 'path',
  d: [
    { value: 'M50,50 C60,60 140,60 150,50 C160,40 140,140 100,100 C60,60 40,40 50,50 Z' }
  ],
  duration: 2000,
  easing: 'easeInOutQuad',
  loop: true,
  direction: 'alternate'
});

Важные особенности

  1. Совпадение точек Для корректного морфинга каждая команда M, C, L и так далее должна иметь аналог в целевом path. Если исходный path имеет 3 сегмента, а целевой — 5, анимация будет искажена.

  2. Использование библиотек для синхронизации path Иногда path создаются вручную и имеют разное количество сегментов. Для упрощения процесса используют инструменты вроде Shape Shifter, которые нормализуют количество точек.

  3. Атрибут fill и морфинг Анимация d не затрагивает цвет. Для изменения цвета одновременно с формой можно анимировать fill:

anime({
  targets: 'path',
  d: [{ value: 'M70,70 C90,40 110,40 130,70 C150,100 110,130 100,100 C90,70 50,90 70,70 Z' }],
  fill: '#4CAF50',
  duration: 2500,
  easing: 'easeInOutSine'
});
  1. Цепочка анимаций и морфинг Можно комбинировать морфинг с другими трансформациями, например translate, rotate, scale. Для этого достаточно добавить несколько свойств в объект anime():
anime({
  targets: 'path',
  d: [{ value: 'M80,80 C100,50 120,50 140,80 C160,110 120,140 100,120 C80,100 60,100 80,80 Z' }],
  translateX: 50,
  rotate: '45deg',
  duration: 3000,
  easing: 'easeInOutExpo'
});

Советы по производительности

  • Для сложных SVG с большим количеством сегментов рекомендуется использовать will-change: transform на контейнере , чтобы браузер оптимизировал рендер.
  • Морфинг path потребляет больше ресурсов, чем обычная трансформация. Если нужно анимировать одновременно несколько path, стоит ограничить частоту кадров через requestAnimationFrame или уменьшить количество сегментов.

Кастомизация кривых

Анимация path в anime.js поддерживает различные кривые интерполяции:

  • linear — равномерная скорость между ключевыми точками
  • easeInOutQuad — плавное ускорение и замедление
  • easeOutElastic — эластичное «отпружинивание»
anime({
  targets: 'path',
  d: [{ value: 'M90,90 C110,60 130,60 150,90 C170,120 130,150 100,130 C70,110 50,110 90,90 Z' }],
  duration: 3500,
  easing: 'easeOutElastic(1, .8)'
});

Совмещение с масками и clip-path

Морфинг path можно использовать для анимации масок или clip-path, создавая динамические эффекты появления и исчезновения элементов. Пример для clip-path:

div {
  width: 200px;
  height: 200px;
  background: #2196F3;
  clip-path: path('M50,50 C70,20 130,20 150,50 C170,80 130,120 100,100 C70,80 30,80 50,50 Z');
}
anime({
  targets: 'div',
  clipPath: [
    { value: 'path("M60,60 C80,30 120,30 140,60 C160,90 120,130 100,110 C80,90 40,90 60,60 Z")' }
  ],
  duration: 2000,
  easing: 'easeInOutQuad'
});

Динамическая генерация path

Для интерактивных эффектов можно генерировать path программно, например используя массивы координат и функции для вычисления кривых. Это позволяет создавать анимации, где форма зависит от данных или действий пользователя.

function createPath(radius) {
  return `M${radius},50 C${radius+20},20 ${radius+80},20 ${radius+100},50 C${radius+120},80 ${radius+80},120 100,100 C80,80 20,80 ${radius},50 Z`;
}

anime({
  targets: 'path',
  d: [{ value: createPath(60) }],
  duration: 2500,
  easing: 'easeInOutQuad'
});
Оглавление