Перемещение

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

Для перемещения элементов чаще всего используются свойства translateX, translateY и translateZ. Эти свойства задают смещение объекта относительно его исходного положения по осям X, Y и Z соответственно. В anime.js они задаются в виде объекта targets и значений анимации:

anime({
  targets: '.box',
  translateX: 250,
  translateY: 100,
  duration: 1000,
  easing: 'easeInOutQuad'
});

В этом примере элемент с классом .box смещается на 250 пикселей вправо и на 100 пикселей вниз за одну секунду. Параметр easing управляет кривой ускорения, что позволяет создавать плавные и естественные движения.

Использование относительных значений

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

anime({
  targets: '.box',
  translateX: '+=100', // перемещение на 100 пикселей относительно текущего положения
  translateY: '-=50',  // перемещение вверх на 50 пикселей
  duration: 800
});

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

Анимация с ключевыми кадрами

Для сложных перемещений применяются keyframes — массив объектов с параметрами движения на разных этапах анимации:

anime({
  targets: '.box',
  keyframes: [
    {translateX: 100, translateY: 0},
    {translateX: 200, translateY: 50},
    {translateX: 150, translateY: 100}
  ],
  duration: 2000,
  easing: 'easeInOutSine'
});

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

Комбинация анимаций и циклов

Для бесконечных перемещений используется свойство loop:

anime({
  targets: '.circle',
  translateX: 300,
  direction: 'alternate', // движение туда и обратно
  loop: true,
  duration: 1200,
  easing: 'easeInOutCubic'
});

Здесь объект будет плавно двигаться вперед и назад по оси X, создавая эффект непрерывного движения.

Анимация SVG-элементов

Перемещение в SVG немного отличается. Вместо CSS-свойств применяются атрибуты cx, cy, x, y в зависимости от типа элемента:

anime({
  targets: 'circle',
  cx: 300,
  cy: 150,
  duration: 1500,
  easing: 'easeOutQuad'
});

Для сложных траекторий SVG можно использовать функции path, которые позволяют объекту двигаться вдоль заранее заданного пути:

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

anime({
  targets: '.dot',
  translateX: path.offsetWidth,
  translateY: path.offsetHeight,
  duration: 2000,
  easing: 'linear'
});

Для более точного движения вдоль кривых часто используется метод getPointAtLength у элементов <path>.

Настройка скорости и ускорения

Свойство easing позволяет контролировать скорость перемещения, создавая естественные эффекты ускорения и замедления. Наиболее часто используются:

  • linear — постоянная скорость движения
  • easeInQuad / easeOutQuad — ускорение или замедление
  • easeInOutSine — плавное ускорение и замедление

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

anime({
  targets: '.box',
  translateX: 300,
  duration: 1000,
  easing: 'easeInOutQuad',
  update: function(anim) {
    console.log(anim.progress); // отслеживание прогресса анимации
  }
});

Перемещение с помощью функций

В anime.js значения можно задавать не только числами, но и функциями. Это позволяет создавать зависимые анимации:

anime({
  targets: '.box',
  translateX: function(el, i, t) {
    return i * 50; // смещение каждого элемента на уникальное расстояние
  },
  duration: 1200
});

Перемещение с динамическим повторением

Комбинация direction: 'alternate' и loop создаёт бесконечные колебания. Для более сложных повторов можно использовать loop как число итераций:

anime({
  targets: '.ball',
  translateY: 200,
  direction: 'alternate',
  loop: 5,
  duration: 800,
  easing: 'easeInOutCubic'
});

Это движение повторится ровно пять раз, меняя направление на каждом шаге.

Практические приёмы

  • Сдвиг нескольких элементов: анимация группы объектов с разной задержкой (delay) создаёт эффект последовательного движения.
  • Смешение с другими свойствами: одновременно с перемещением можно анимировать масштаб (scale) или прозрачность (opacity) для более выразительного эффекта.
  • Использование относительных координат: упрощает анимации при адаптивной верстке и при повторных перемещениях.

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

Оглавление