Анимация CSS-свойств

Библиотека anime.js предоставляет мощный инструмент для создания плавных и гибких анимаций CSS-свойств в JavaScript. Она позволяет управлять трансформациями, цветами, прозрачностью, размерами элементов и другими свойствами через единый API.

Простейший пример анимации CSS-свойства выглядит так:

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

Здесь targets указывает на элементы DOM, которые будут анимироваться, translateX — свойство трансформации, duration — длительность анимации в миллисекундах, а easing — функция временной кривой, определяющая динамику движения.

Работа с различными типами CSS-свойств

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

  1. Трансформации: translateX, translateY, scale, rotate.
  2. Цветовые свойства: backgroundColor, borderColor, color.
  3. Размеры: width, height, padding, margin.
  4. Прозрачность: opacity.
  5. Позиционирование: top, left, right, bottom.

Для цветовых свойств можно использовать форматы HEX, RGB и HSL:

anime({
  targets: '.text',
  color: '#ff0000',
  backgroundColor: 'rgb(0,255,0)',
  duration: 1500,
  easing: 'linear'
});

Анимация нескольких свойств одновременно

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

anime({
  targets: '.card',
  translateX: 100,
  scale: 1.5,
  rotate: '45deg',
  backgroundColor: '#3498db',
  duration: 2000,
  easing: 'easeOutElastic(1, .8)'
});

Каждое свойство может иметь свои параметры duration и delay, используя массив объектов:

anime({
  targets: '.circle',
  translateX: [
    { value: 250, duration: 1000 },
    { value: 0, duration: 1000 }
  ],
  opacity: [
    { value: 0, duration: 500 },
    { value: 1, duration: 500 }
  ],
  easing: 'easeInOutSine'
});

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

Для плавной динамики можно применять относительные значения += и -=:

anime({
  targets: '.box',
  translateX: '+=200',
  translateY: '-=100',
  duration: 1500,
  easing: 'easeInOutCubic'
});

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

Управление временной кривой анимации

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

  • linear — равномерная скорость;
  • easeInQuad — ускорение;
  • easeOutQuad — замедление;
  • easeInOutQuad — ускорение с последующим замедлением;
  • easeOutElastic — эффект упругости;
  • easeInOutBounce — эффект «отскока».

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

Последовательности анимации и задержки

Для создания цепочек анимаций применяются delay и stagger:

anime({
  targets: '.item',
  translateY: 50,
  opacity: 1,
  delay: anime.stagger(200), // элементы анимируются с шагом 200мс
  duration: 1000,
  easing: 'easeOutExpo'
});

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

Анимация с обратной связью

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

  • begin — вызывается при старте анимации;
  • update — вызывается на каждом кадре анимации;
  • complete — вызывается после завершения анимации.
anime({
  targets: '.ball',
  translateX: 300,
  duration: 1500,
  easing: 'easeInOutQuad',
  update: function(anim) {
    console.log(anim.progress + '%');
  },
  complete: function() {
    console.log('Анимация завершена');
  }
});

Анимация ключевых кадров (keyframes)

Для сложных движений можно использовать keyframes, позволяя задавать последовательность изменений свойств:

anime({
  targets: '.square',
  keyframes: [
    { translateX: 100, rotate: '10deg' },
    { translateX: 200, rotate: '-10deg' },
    { translateX: 0, rotate: '0deg' }
  ],
  duration: 3000,
  easing: 'easeInOutSine'
});

Каждый объект в массиве keyframes описывает набор CSS-свойств и их значения в определённый момент анимации.

Циклические анимации и петли

Anime.js поддерживает повторение анимаций с помощью loop и direction:

anime({
  targets: '.spinner',
  rotate: 360,
  duration: 2000,
  easing: 'linear',
  loop: true,
  direction: 'alternate' // чередование направления
});

Loop может быть числовым (например, loop: 3) или бесконечным (loop: true), что удобно для загрузочных индикаторов и фоновых анимаций.

Анимация с использованием CSS-переменных

Anime.js может работать с CSS-переменными, что позволяет создавать адаптивные анимации:

anime({
  targets: document.documentElement,
  '--main-color': '#e74c3c',
  duration: 1000,
  easing: 'easeInOutQuad'
});

Это полезно для динамического изменения темы или цветовых схем без изменения каждого элемента вручную.

Оглавление