Динамические параметры

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

Простейший пример динамического параметра:

anime({
  targets: '.box',
  translateX: function(el, i) {
    return i * 100; // каждый элемент смещается на 100px больше предыдущего
  },
  duration: 1000
});

Здесь translateX принимает функцию с аргументами:

  • el — текущий DOM-элемент, к которому применяется анимация
  • i — индекс элемента в списке targets

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

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

Динамические функции можно комбинировать с вычислением случайных значений или зависимостей от других свойств элемента:

anime({
  targets: '.circle',
  translateY: function() {
    return Math.random() * 300; // случайная высота для каждого элемента
  },
  rotate: function(el) {
    return el.dataset.angle || 0; // угол может храниться в data-атрибуте
  },
  duration: 1200,
  easing: 'easeOutElastic(1, .8)'
});

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

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

Функции динамических параметров особенно полезны при построении staggered анимаций:

anime({
  targets: '.item',
  translateX: function(el, i) {
    return i * 50;
  },
  opacity: function(el, i) {
    return 1 - i * 0.1;
  },
  delay: anime.stagger(100), // задержка для каждого следующего элемента
  duration: 800
});

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

  • anime.stagger(value, options) позволяет автоматически рассчитывать смещения, задержки или масштабы для каждого элемента.
  • Функции динамических параметров могут учитывать индекс элемента, размеры или позицию на странице.

Динамические параметры и вычисление сложных кривых

Вместо фиксированных значений можно использовать функции, возвращающие объект с несколькими свойствами:

anime({
  targets: '.triangle',
  translateX: function(el, i) {
    return { value: i * 20, duration: 500 + i * 100 };
  },
  rotate: function() {
    return { value: 360, duration: 2000 };
  }
});

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

Динамические параметры и CSS-свойства

Для анимации CSS-свойств динамические функции могут возвращать значения в разных единицах измерения:

anime({
  targets: '.panel',
  width: function(el, i) {
    return el.offsetWidth + i * 30 + 'px';
  },
  height: function(el) {
    return (el.offsetHeight * 1.5) + 'px';
  },
  duration: 1000,
  easing: 'easeInOutQuad'
});

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

  • Можно комбинировать абсолютные и относительные значения.
  • Доступ к offsetWidth, offsetHeight или другим свойствам DOM позволяет создавать адаптивные анимации.

Использование динамических параметров с timeline

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

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

tl.add({
  targets: '.card',
  translateY: function(el, i) {
    return i * 30;
  },
  opacity: function(el, i) {
    return 0.5 + i * 0.1;
  }
}).add({
  targets: '.card',
  rotate: function(el, i) {
    return i * 10;
  },
  delay: function(el, i) {
    return i * 100;
  }
});

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

Совмещение динамических параметров с пользовательскими функциями

Для более сложных сценариев можно использовать внешние функции:

function bounceDistance(i) {
  return Math.sin(i) * 100;
}

anime({
  targets: '.dot',
  translateY: function(el, i) {
    return bounceDistance(i);
  },
  duration: 1200,
  easing: 'easeOutBounce'
});

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

Резюме практического применения

Динамические параметры в anime.js дают возможность:

  • анимировать несколько элементов с индивидуальными значениями;
  • создавать случайные, индекс-зависимые и адаптивные эффекты;
  • строить сложные последовательные анимации через timeline;
  • комбинировать динамические вычисления с CSS-свойствами и DOM-метриками;
  • интегрировать пользовательские функции для повторного использования и управления логикой движения.

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

Оглавление