Работа с пользовательскими объектами

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

Для начала необходимо определить объект с нужными свойствами:

const point = { x: 0, y: 0 };

Анимация выполняется с помощью функции anime(), где в параметрах задаются target, свойства для анимации, длительность и тайминги:

anime({
  targets: point,
  x: 250,
  y: 150,
  duration: 1000,
  easing: 'easeInOutQuad',
  update: function() {
    console.log(`Текущие координаты: x=${point.x}, y=${point.y}`);
  }
});

Ключевые моменты:

  • targets может быть объектом или массивом объектов.
  • Свойства, которые будут анимироваться, указываются напрямую (x, y).
  • Колбэк update позволяет отслеживать промежуточные значения и выполнять действия в реальном времени.

Использование массивов объектов

Для анимации коллекции объектов применяется массив в targets:

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

anime({
  targets: points,
  x: anime.stagger(50), // увеличиваем x на 50 для каждого объекта
  y: anime.stagger(50, { start: 0 }), // индивидуальная задержка
  duration: 800,
  easing: 'easeOutElastic'
});

Особенности работы с массивами объектов:

  • anime.stagger() позволяет создавать последовательные смещения или задержки.
  • Анимация каждого объекта идёт параллельно, но с заданными интервалами.
  • Это удобно для визуализации графов, точек на канвасе или интерактивных диаграмм.

Анимация вложенных свойств

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

const rectangle = {
  position: { x: 0, y: 0 },
  size: { width: 100, height: 50 }
};

anime({
  targets: rectangle,
  'position.x': 300,
  'position.y': 200,
  'size.width': 200,
  'size.height': 100,
  duration: 1200,
  easing: 'easeInOutSine'
});

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

  • Вложенные свойства разделяются точкой в targets.
  • Можно анимировать одновременно несколько уровней вложенности.
  • Отлично подходит для объектов, которые моделируют физические элементы или компоненты UI.

Функции для динамических значений

Значения свойств можно задавать функциями, чтобы анимация зависела от исходного состояния или индекса объекта:

const balls = [
  { radius: 10 },
  { radius: 15 },
  { radius: 20 }
];

anime({
  targets: balls,
  radius: function(el, i) {
    return el.radius * (i + 1); // увеличиваем радиус для каждого элемента
  },
  duration: 1000,
  easing: 'easeOutBounce'
});

Преимущества динамических функций:

  • Позволяют вычислять конечные значения на основе начальных данных.
  • Можно учитывать индекс элемента, случайные значения или внешние параметры.

Контроль анимации пользовательских объектов

anime.js предоставляет полный контроль над анимацией через методы анимационного объекта:

const animation = anime({
  targets: point,
  x: 400,
  y: 300,
  duration: 1500,
  easing: 'easeInOutCubic'
});

animation.pause();   // приостанавливает анимацию
animation.play();    // возобновляет
animation.reverse(); // меняет направление
animation.seek(500); // перемещает анимацию на 500 мс

Полезные методы:

  • pause() и play() — управление воспроизведением.
  • reverse() — позволяет использовать анимацию как циклическую смену состояний.
  • seek(time) — позволяет “перемотать” анимацию на любое время.

Связь с визуализацией

Чаще всего пользовательские объекты применяются в связке с канвасом или SVG:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const circle = { x: 50, y: 50, radius: 20 };

anime({
  targets: circle,
  x: 300,
  y: 200,
  radius: 50,
  duration: 2000,
  easing: 'easeInOutQuad',
  update: () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
    ctx.fill();
  }
});

Особенности интеграции:

  • Колбэк update позволяет синхронизировать визуализацию с анимацией объекта.
  • Можно анимировать любые параметры, влияющие на отрисовку, не ограничиваясь только координатами.
  • Поддержка анимации нескольких объектов позволяет создавать сложные сцены.

Итоговая структура анимации пользовательских объектов

  1. Определение объекта с анимируемыми свойствами.
  2. Использование anime() с targets на объект или массив объектов.
  3. Применение функций или stagger для динамических значений и последовательностей.
  4. Использование колбэков update, begin, complete для интеграции с визуализацией.
  5. Управление анимацией через методы pause(), play(), reverse(), seek().

Такой подход делает anime.js мощным инструментом для анимации логики приложения и визуальных эффектов за пределами стандартного DOM.

Оглавление