Анимация числовых свойств объектов

Библиотека anime.js позволяет создавать плавные анимации любых числовых свойств объектов JavaScript. К числовым свойствам относятся как стандартные CSS-свойства (ширина, высота, прозрачность), так и произвольные свойства объектов. Анимация производится с использованием ключевых параметров: targets, properties, duration, easing.

Простейший пример анимации числового свойства объекта:

const obj = { x: 0 };

anime({
  targets: obj,
  x: 250,
  duration: 1000,
  easing: 'linear',
  update: () => {
    console.log(obj.x);
  }
});

В этом примере свойство x объекта obj плавно изменяется от 0 до 250 за одну секунду. Функция update вызывается на каждом кадре, что позволяет отслеживать текущие значения свойства.

Настройка временных функций (Easing)

Параметр easing управляет кривой изменения значения во времени. Anime.js поддерживает множество предустановленных вариантов:

  • 'linear' – равномерное изменение.
  • 'easeInQuad', 'easeOutQuad', 'easeInOutQuad' – квадратичные ускорения и замедления.
  • 'easeInElastic', 'easeOutBounce' – физически приближенные эффекты с пружинами и отскоками.

Пример с использованием кривой ускорения:

const obj = { y: 0 };

anime({
  targets: obj,
  y: 300,
  duration: 1500,
  easing: 'easeInOutQuad',
  update: () => console.log(obj.y)
});

Использование разных easing существенно влияет на восприятие анимации и позволяет создавать более «живые» движения.

Множественные свойства

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

const obj = { x: 0, y: 0, opacity: 0 };

anime({
  targets: obj,
  x: 200,
  y: 100,
  opacity: 1,
  duration: 2000,
  easing: 'easeOutQuad',
  update: () => console.log(obj)
});

Каждое свойство анимируется независимо, но синхронно по времени.

Использование функций для динамических значений

Свойства можно задавать не только константами, но и функциями, которые вычисляют конечное значение на основе текущего состояния, индекса элемента или случайного числа:

const obj = { value: 0 };

anime({
  targets: obj,
  value: () => Math.random() * 500,
  duration: 1000,
  easing: 'easeInOutSine',
  update: () => console.log(obj.value)
});

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

Циклические и последовательные анимации

Свойства можно анимировать циклично с помощью параметров loop и direction:

const obj = { x: 0 };

anime({
  targets: obj,
  x: 300,
  duration: 1000,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutQuad'
});
  • direction: 'alternate' – после достижения конечного значения анимация возвращается к исходному.
  • loop: true – анимация повторяется бесконечно, либо можно задать число повторов.

Анимация произвольных объектов

Не обязательно использовать DOM-элементы. Любой JavaScript-объект с числовыми свойствами подходит для анимации. Это удобно для управления состояниями игры, визуализаций или данных:

const particle = { radius: 10, speed: 5 };

anime({
  targets: particle,
  radius: 50,
  speed: 20,
  duration: 1200,
  easing: 'easeOutElastic',
  update: () => console.log(particle)
});

Параметры radius и speed изменяются одновременно, создавая комплексную анимацию объекта.

Привязка к кадрам и тайминг

Метод update позволяет выполнять действия на каждом кадре анимации, синхронизируя визуализацию с изменением числовых свойств:

const obj = { progress: 0 };

anime({
  targets: obj,
  progress: 100,
  duration: 2000,
  easing: 'linear',
  update: () => renderProgress(obj.progress)
});

function renderProgress(value) {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(0, 0, value * 2, 50);
}

Функция renderProgress визуально отображает текущее значение свойства progress на холсте.

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

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

const obj = { x: 0 };

anime({
  targets: obj,
  keyframes: [
    { x: 100 },
    { x: 50 },
    { x: 200 }
  ],
  duration: 2000,
  easing: 'easeInOutSine',
  update: () => console.log(obj.x)
});

Каждый ключевой кадр задает промежуточное состояние, а библиотека плавно интерполирует значения между ними.

Управление анимацией через методы

Anime.js предоставляет методы для управления анимацией после её запуска:

  • play() – запуск или возобновление анимации.
  • pause() – остановка.
  • restart() – перезапуск с начала.
  • seek(ms) – переход к определённой позиции в миллисекундах.
  • reverse() – инвертирование направления.
const anim = anime({
  targets: obj,
  x: 400,
  duration: 1500,
  easing: 'easeInOutQuad'
});

anim.pause();
setTimeout(() => anim.play(), 1000);

Интерполяция и вычисление промежуточных значений

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

Анимация массивов объектов

Targets может быть массивом объектов:

const particles = [
  { x: 0 },
  { x: 50 },
  { x: 100 }
];

anime({
  targets: particles,
  x: 200,
  duration: 1200,
  delay: anime.stagger(100),
  easing: 'easeOutQuad'
});
  • anime.stagger(100) позволяет создать эффект волны или последовательного старта анимаций.

Вывод

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

Оглавление