Интеграция с data-атрибутами

Anime.js предоставляет гибкий способ связывать анимацию с HTML-элементами, используя data-атрибуты. Это позволяет хранить параметры анимации непосредственно в разметке, что делает код более читаемым и масштабируемым.

Пример базового синтаксиса с data-атрибутами:

<div class="box" data-translate-x="250" data-rotate="360"></div>
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  anime({
    targets: box,
    translateX: box.dataset.translateX,
    rotate: box.dataset.rotate,
    duration: 2000,
    easing: 'easeInOutQuad'
  });
});

В этом примере значения translateX и rotate берутся прямо из атрибутов data-translate-x и data-rotate. Использование dataset обеспечивает простое считывание любых кастомных данных элемента.

Динамическое управление анимацией через data-атрибуты

Data-атрибуты позволяют изменять параметры анимации без редактирования JavaScript-кода. Для этого можно использовать универсальные функции, которые считывают все данные элемента и автоматически применяют их к анимации.

Пример динамической генерации анимации:

<div class="circle" 
     data-scale="1.5" 
     data-duration="1500" 
     data-easing="easeOutElastic(1, .5)">
</div>
const circles = document.querySelectorAll('.circle');

circles.forEach(circle => {
  const { scale, duration, easing } = circle.dataset;

  anime({
    targets: circle,
    scale: scale,
    duration: parseInt(duration),
    easing: easing
  });
});

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

  • Data-атрибуты всегда доступны через element.dataset.
  • Значения автоматически преобразуются в строки, поэтому числовые параметры нужно кастовать через parseInt или parseFloat.
  • Можно хранить сложные выражения, например easeOutElastic(1, .5), и использовать их напрямую.

Связывание нескольких параметров через data-атрибуты

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

Пример:

<div class="square" data-keyframes="0:0,50:100,100:0"></div>
const squares = document.querySelectorAll('.square');

squares.forEach(square => {
  const keyframes = square.dataset.keyframes
    .split(',')
    .map(frame => frame.split(':').map(Number));

  anime({
    targets: square,
    translateY: keyframes.map(kf => kf[1]),
    duration: 2000,
    easing: 'linear'
  });
});

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

Использование data-атрибутов для триггеров анимации

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

<button class="btn" data-action="hover">Hover me</button>
<div class="ball" data-translate-x="200"></div>
const btns = document.querySelectorAll('.btn');

btns.forEach(btn => {
  const action = btn.dataset.action;
  const ball = document.querySelector('.ball');

  if (action === 'hover') {
    btn.addEventListener('mouseenter', () => {
      anime({
        targets: ball,
        translateX: ball.dataset.translateX,
        duration: 1000,
        easing: 'easeOutExpo'
      });
    });
  }
});

Это позволяет создавать модульные анимации, которые легко конфигурировать через HTML, без необходимости менять JavaScript.

Встраивание сложных объектов в data-атрибуты

Для более сложных случаев можно хранить JSON-структуры в data-атрибутах. Это полезно, если один элемент управляет множеством свойств одновременно.

<div class="star" data-animation='{"translateX":300,"rotate":720,"scale":1.5,"duration":2000}'></div>
const stars = document.querySelectorAll('.star');

stars.forEach(star => {
  const animationData = JSON.parse(star.dataset.animation);

  anime({
    targets: star,
    ...animationData,
    easing: 'easeInOutSine'
  });
});

Преимущества:

  • Удобно управлять множеством параметров.
  • Позволяет хранить конфигурации прямо в разметке.
  • Легко расширять и модифицировать анимацию без правки JS.

Рекомендации по структурированию data-атрибутов

  • Использовать единый стиль именования, например data-animate-*.
  • Хранить числовые параметры как числа или строки, которые легко кастовать.
  • Избегать чрезмерного количества атрибутов на одном элементе, чтобы не усложнять парсинг.
  • Использовать JSON для сложных конфигураций, но не для всего подряд.

Комбинирование нескольких элементов и data-атрибутов

Для анимаций групп элементов можно использовать querySelectorAll и массивное считывание data-атрибутов.

<div class="dot" data-delay="0"></div>
<div class="dot" data-delay="200"></div>
<div class="dot" data-delay="400"></div>
const dots = document.querySelectorAll('.dot');

anime({
  targets: dots,
  translateY: 50,
  delay: el => parseInt(el.dataset.delay),
  duration: 1000,
  easing: 'easeInOutQuad'
});

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

Использование data-атрибутов в anime.js делает код чистым, гибким и легко настраиваемым, а также позволяет отделять логику анимации от структуры HTML. Такой подход особенно эффективен при работе с большими проектами, где необходимо централизованно управлять анимацией множества элементов.

Оглавление