Transform-свойства

В anime.js анимация transform-свойств является одним из наиболее мощных инструментов для динамического управления положением, размером и формой элементов. Под transform понимаются такие CSS-свойства, как translate, rotate, scale, skew и их комбинации. Они позволяют создавать плавные и аппаратно ускоренные анимации без изменения layout документа.

Translate: перемещение элементов

Свойства translateX, translateY и translateZ отвечают за смещение элемента по осям. В anime.js их можно анимировать следующим образом:

anime({
  targets: '.box',
  translateX: 250,
  translateY: 100,
  duration: 2000,
  easing: 'easeInOutQuad'
});
  • targets — элементы, на которые применяется анимация. Может быть CSS-селектором, DOM-элементом или массивом элементов.
  • translateX / translateY — числовое значение смещения в пикселях. Поддерживаются также проценты, например '50%'.
  • duration — длительность анимации в миллисекундах.
  • easing — функция сглаживания движения (linear, easeInOutQuad, spring и др.).

Можно комбинировать несколько transform-свойств одновременно:

anime({
  targets: '.circle',
  translateX: 200,
  translateY: 50,
  rotate: '1turn',
  duration: 3000,
  easing: 'easeInOutSine'
});

Rotate: вращение элементов

Свойство rotate принимает значения в градусах ('45deg') или полный оборот ('1turn').

anime({
  targets: '.arrow',
  rotate: '180deg',
  duration: 1500,
  easing: 'easeOutExpo'
});
  • В anime.js можно анимировать несколько вращений сразу:
rotate: ['0deg', '720deg']
  • Поддерживается динамическая анимация: значение может быть функцией, возвращающей разные углы для каждого элемента.
anime({
  targets: '.star',
  rotate: el => el.dataset.angle + 'deg',
  duration: 2000
});

Scale: изменение размера

scale, scaleX и scaleY управляют размером элемента. scale изменяет одновременно по обеим осям, scaleX и scaleY — по отдельной.

anime({
  targets: '.button',
  scale: [1, 1.5],
  duration: 1000,
  easing: 'easeInOutBack'
});
  • Анимация от текущего состояния к новому задаётся массивом [начальное, конечное].
  • Можно комбинировать с translate и rotate для комплексной трансформации.
anime({
  targets: '.icon',
  translateY: 50,
  scale: 1.2,
  rotate: '45deg',
  duration: 1200
});

Skew: наклон элементов

Свойства skewX и skewY изменяют перспективу элемента, создавая эффект наклона. Значения задаются в градусах:

anime({
  targets: '.panel',
  skewX: '30deg',
  skewY: '15deg',
  duration: 800,
  easing: 'easeInOutQuad'
});
  • skew часто используется для динамичных интерфейсных эффектов при наведении или переходах.
  • Можно задавать отрицательные значения для наклона в обратную сторону.

Композиция transform-свойств

anime.js позволяет комбинировать несколько transform-свойств в одной анимации, создавая комплексные движения:

anime({
  targets: '.card',
  translateX: 100,
  translateY: 50,
  rotate: '1turn',
  scale: 1.2,
  skewX: '10deg',
  duration: 2000,
  easing: 'easeInOutCubic'
});
  • Все свойства анимируются параллельно по заданной длительности.
  • Можно использовать функции обратного вызова для динамического расчёта значений каждого свойства на лету:
anime({
  targets: '.dot',
  translateX: (el, i) => i * 30,
  rotate: () => anime.random(0, 360) + 'deg',
  duration: 1500
});

Синтаксис для последовательных анимаций transform

Для создания цепочек анимаций transform используется anime.timeline:

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

tl.add({
  targets: '.box',
  translateX: 250
})
.add({
  targets: '.box',
  rotate: '1turn',
  scale: 1.5
})
.add({
  targets: '.box',
  translateY: 100
});
  • Каждый шаг timeline выполняется после предыдущего, если не задан параметр offset.
  • Можно задавать отрицательные значения offset для перекрытия анимаций.

Аппаратная оптимизация и transform

Использование transform-свойств в anime.js обеспечивает аппаратное ускорение, так как CSS-трансформации обычно выполняются GPU, а не CPU. Это позволяет:

  • Плавные анимации без лагов даже на слабых устройствах.
  • Снижение нагрузки на DOM и repaint.
  • Комбинацию нескольких трансформаций без изменения layout.

Советы по работе с transform

  • Для плавной анимации перемещений элементов по обеим осям использовать translateX и translateY, а не left и top.
  • Для комплексных эффектов объединять translate, rotate, scale и skew в одной анимации.
  • Использовать timeline для последовательных или перекрывающихся анимаций.
  • Для динамических сцен и генерации случайных эффектов применять функции в качестве значения свойства.
  • Всегда проверять совместимость transform с другими стилями, чтобы избежать неожиданных перекрытий.
Оглавление