Вращение

В anime.js вращение объектов реализуется через свойство rotate. Оно позволяет задавать угол поворота элемента относительно его центра (по умолчанию) или пользовательской точки трансформации. В качестве значения можно использовать числа (градусы), строки с единицами измерения (deg, turn) или массивы для анимации между несколькими состояниями.

anime({
  targets: '.box',
  rotate: '180deg',
  duration: 1000,
  easing: 'easeInOutSine'
});

В этом примере элемент с классом .box плавно поворачивается на 180 градусов за одну секунду с использованием кривой ускорения easeInOutSine.

Анимация вращения с использованием массивов

Для создания сложных эффектов вращения можно передавать массив значений. Anime.js последовательно анимирует элемент через указанные состояния:

anime({
  targets: '.wheel',
  rotate: ['0deg', '90deg', '180deg', '360deg'],
  duration: 2000,
  easing: 'linear'
});

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

  • Элементы проходят через каждое значение массива.
  • linear обеспечивает равномерное вращение без замедления и ускорения.
  • Массив позволяет комбинировать положительные и отрицательные углы для обратного вращения.

Использование единиц измерения

Anime.js поддерживает несколько единиц для вращения:

  • deg — градусы (например, '90deg').
  • turn — полный оборот (1turn = 360deg).
  • rad — радианы (π rad = 180deg).
anime({
  targets: '.arrow',
  rotate: '0.5turn', // эквивалент 180 градусов
  duration: 1500,
  easing: 'easeOutQuad'
});

Центр вращения и трансформации

По умолчанию вращение происходит вокруг центра элемента. Для изменения точки вращения используется CSS-свойство transform-origin:

.pendulum {
  transform-origin: top center;
}
anime({
  targets: '.pendulum',
  rotate: '60deg',
  duration: 1000,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutSine'
});

Примечания:

  • direction: 'alternate' заставляет элемент возвращаться в исходное положение после завершения анимации.
  • loop: true повторяет анимацию бесконечно.
  • Изменение transform-origin позволяет создавать эффект качающегося маятника или вращающегося колеса с нестандартной осью.

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

Anime.js поддерживает одновременную анимацию нескольких CSS-свойств. Например, можно сочетать вращение с масштабированием и перемещением:

anime({
  targets: '.icon',
  rotate: '360deg',
  scale: [1, 1.5],
  translateX: 100,
  duration: 2000,
  easing: 'easeInOutQuad'
});

Эффект:

  • Элемент перемещается по горизонтали, одновременно увеличивается в размере и совершает полный оборот.

Вращение с функцией обратного вызова

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

anime({
  targets: '.spinner',
  rotate: '+=180deg', // относительное вращение
  duration: 800,
  easing: 'easeInOutCubic',
  update: function(anim) {
    console.log('Текущий угол:', anim.animations[0].currentValue);
  },
  complete: function() {
    console.log('Вращение завершено');
  }
});

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

  • '+=180deg' увеличивает текущий угол на 180 градусов.
  • Колбэк update позволяет отслеживать промежуточные состояния анимации.
  • complete срабатывает после окончания анимации и может запускать следующие действия.

Циклическое вращение и бесконечные эффекты

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

anime({
  targets: '.loader',
  rotate: '+=360deg',
  duration: 1000,
  easing: 'linear',
  loop: true
});

Примечания:

  • '+=360deg' гарантирует плавный непрерывный оборот.
  • linear предотвращает ускорение или замедление.
  • Такой подход идеально подходит для индикаторов загрузки или вращающихся иконок.

Управление скоростью вращения через duration

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

let spin = anime({
  targets: '.fan',
  rotate: '+=360deg',
  duration: 2000,
  easing: 'linear',
  loop: true
});

setTimeout(() => {
  spin.duration = 500; // ускорение вращения
}, 5000);

Вращение SVG-элементов

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

anime({
  targets: '#svgGear',
  rotate: '360deg',
  transformOrigin: '50% 50%',
  duration: 1500,
  easing: 'easeInOutSine',
  loop: true
});

Особенности для SVG:

  • transformOrigin часто задается в процентах или через координаты центра.
  • Эффекты вращения SVG интегрируются с другими анимациями, включая масштаб и смещение.
Оглавление