Искажение

Библиотека anime.js предоставляет мощные средства для анимации DOM-элементов, SVG и JavaScript-объектов. Одним из ключевых приёмов является искажение, которое позволяет создавать динамические деформации объектов, варьируя их размеры, форму или положение в пространстве с течением времени. В анимациях искажение часто используется для создания эффектов «пульсации», «растяжения» или «волнообразного движения».

Свойства и методов для искажения

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

  • scaleX / scaleY – изменение размера объекта по горизонтали и вертикали.
  • skewX / skewY – сдвиг по углу относительно осей, создающий эффект наклона.
  • translateX / translateY – смещение объекта по координатной оси.
  • rotate – вращение объекта вокруг точки.
  • points (для SVG) – манипулирование координатами вершин полигональных объектов.
  • keyframes – последовательное описание состояния объекта на разных этапах анимации для сложных искажений.

Пример базового искажения элемента:

anime({
  targets: '.box',
  scaleX: [1, 1.5, 1],
  scaleY: [1, 0.5, 1],
  skewX: [0, 25, 0],
  duration: 2000,
  easing: 'easeInOutSine',
  loop: true
});

В этом примере объект .box сначала растягивается по горизонтали и сжимается по вертикали, затем возвращается в исходное состояние с эффектом наклона.

Искажение с помощью keyframes

Keyframes позволяют задавать сложные последовательные трансформации:

anime({
  targets: '.circle',
  keyframes: [
    { scale: 1.2, rotate: 15 },
    { scale: 0.8, rotate: -15 },
    { scale: 1, rotate: 0 }
  ],
  duration: 1800,
  easing: 'easeInOutQuad',
  loop: true
});
  • scale – общий масштаб элемента.
  • rotate – вращение.
  • Последовательность keyframes задает естественное колебание, создавая эффект живого объекта.

SVG искажения

Для SVG-объектов искажение часто достигается через изменение атрибутов points, d, path и использование anime.path() для анимации вдоль кривой.

Пример анимации кривой:

const path = anime.path('path#motionPath');

anime({
  targets: 'circle',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  duration: 4000,
  loop: true,
  easing: 'linear'
});

Здесь элемент circle движется по заданной кривой, одновременно вращаясь по касательной, создавая плавное искажение траектории.

Применение функции easing для динамических искажений

Функции easing определяют скорость и ритм искажения:

  • easeInSine, easeOutSine – плавное ускорение и замедление.
  • easeInOutElastic – эффект «резинки» при растяжении и сжатии.
  • easeInOutBounce – имитация отскока при деформации.

Пример с эластичным искажением:

anime({
  targets: '.elastic-box',
  scale: [1, 1.5],
  duration: 1200,
  easing: 'easeInOutElastic(1, .5)',
  loop: true
});

Комбинированные искажения

Для более выразительных анимаций можно комбинировать scale, skew, translate и rotate:

anime({
  targets: '.complex-box',
  scaleX: [1, 1.3, 1],
  scaleY: [1, 0.7, 1],
  skewX: [0, 20, -10, 0],
  translateY: [0, -30, 10, 0],
  rotate: [0, 15, -10, 0],
  duration: 2500,
  easing: 'easeInOutQuart',
  loop: true
});

Такое сочетание создает эффект живого, динамически изменяющегося объекта, который выглядит органично и интересно.

Контроль искажения через timeline

Timeline позволяет управлять сложными анимациями с множеством искажений:

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

tl.add({
  targets: '.box',
  scaleX: 1.5
}).add({
  targets: '.box',
  skewY: 20
}, '-=500').add({
  targets: '.box',
  rotate: 45
}, '-=300');
  • '-=500' и '-=300' – перекрытие анимаций для плавного перехода.
  • Timeline дает возможность создавать сложные искажения без громоздких keyframes.

Практические советы

  1. Для плавного визуального эффекта избегать одновременного максимального искажения по всем параметрам.
  2. Использовать loop и direction: ‘alternate’ для естественного возврата в исходное состояние.
  3. Для SVG-элементов искажения лучше делать через кривые и атрибуты, а не CSS-трансформации, чтобы сохранить четкость и пропорции.
  4. Комбинировать разные easing-функции на разных свойствах для более органичного движения.

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

Оглавление