Техники морфинга

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

Пример базового морфинга SVG-пути:

anime({
  targets: 'path',
  d: [
    { value: 'M10 80 Q 95 10 180 80 T 350 80' },
    { value: 'M10 80 Q 95 150 180 80 T 350 80' }
  ],
  duration: 2000,
  easing: 'easeInOutQuad',
  loop: true
});

Здесь:

  • targets — элементы, к которым применяется анимация;
  • d — массив значений пути, через которые будет происходить морфинг;
  • duration — продолжительность анимации;
  • easing — функция плавности перехода;
  • loop — повторение анимации.

Совмещение морфинга с другими свойствами

Морфинг можно комбинировать с изменением цвета, масштаба, поворота и других CSS или SVG-свойств. Это позволяет создавать динамичные визуальные эффекты.

anime({
  targets: 'path',
  d: [
    { value: 'M10 80 Q 95 10 180 80 T 350 80' },
    { value: 'M10 80 Q 95 150 180 80 T 350 80' }
  ],
  fill: [
    { value: '#FF0000' },
    { value: '#0000FF' }
  ],
  scale: [
    { value: 1 },
    { value: 1.2 }
  ],
  duration: 3000,
  easing: 'easeInOutSine',
  loop: true
});

В этом примере морфинг дополняется плавным изменением заливки и масштаба, создавая более выразительный эффект.

Контроль ключевых точек пути

Для сложного морфинга важно учитывать количество точек пути. В anime.js несовпадение числа точек между исходным и конечным состоянием может вызвать некорректную анимацию. Решения:

  • Использовать инструменты вроде Shape Shifter для выравнивания точек.
  • Преобразовать SVG к формату с одинаковым числом кривых и линий.
  • Применять промежуточные шаги через массив значений d.
anime({
  targets: 'path',
  d: [
    { value: 'M10 80 Q 95 10 180 80 T 350 80' },
    { value: 'M10 80 Q 50 50 100 80 T 350 80' },
    { value: 'M10 80 Q 95 150 180 80 T 350 80' }
  ],
  duration: 4000,
  easing: 'easeInOutCubic',
  loop: true
});

Морфинг объектов

Помимо SVG-путей, anime.js позволяет морфить обычные объекты JavaScript. Это удобно для анимации сложных данных, не связанных с DOM.

let point = { x: 0, y: 0 };

anime({
  targets: point,
  x: 100,
  y: 50,
  round: 1,
  duration: 1500,
  easing: 'easeInOutQuad',
  update: function() {
    console.log(point.x, point.y);
  }
});

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

  • round округляет значения, чтобы использовать целые числа;
  • update позволяет выполнять действия при каждом кадре анимации;
  • Морфинг объектов можно использовать совместно с SVG, canvas и веб-графикой.

Последовательный и синхронный морфинг

Anime.js предоставляет средства для управления временем и последовательностью морфинга через timeline.

let tl = anime.timeline({ loop: true });

tl
.add({
  targets: 'path',
  d: 'M10 80 Q 95 10 180 80 T 350 80',
  duration: 1000,
  easing: 'easeInOutQuad'
})
.add({
  targets: 'path',
  d: 'M10 80 Q 95 150 180 80 T 350 80',
  duration: 1000,
  easing: 'easeInOutQuad'
});
  • timeline позволяет объединять несколько анимаций в последовательность;
  • Можно использовать offset для синхронного запуска различных анимаций;
  • Отлично подходит для сложных морфинговых эффектов с несколькими элементами.

Кастомные кривые морфинга

В anime.js можно управлять траекторией морфинга через кастомные кривые Безье. Например:

anime({
  targets: 'path',
  d: [
    { value: 'M10 80 Q 95 10 180 80 T 350 80' },
    { value: 'M10 80 Q 95 150 180 80 T 350 80' }
  ],
  duration: 2500,
  easing: 'cubicBezier(0.68, -0.55, 0.27, 1.55)',
  loop: true
});

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

Смешивание морфинга с событиями

Можно запускать морфинг в ответ на события пользователя, например:

document.querySelector('button').addEventListener('click', () => {
  anime({
    targets: 'path',
    d: 'M10 80 Q 95 10 180 80 T 350 80',
    duration: 1200,
    easing: 'easeOutElastic(1, .8)'
  });
});

Это открывает возможности интерактивной графики, когда формы реагируют на действия пользователя, создавая ощущение живой анимации.

Оглавление