Типы данных параметров

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

Числовые значения

Наиболее простым типом является число (Number). Числовые значения используются для анимации любых свойств, которые могут быть выражены через числа, таких как позиция, размер, прозрачность, угол поворота.

anime({
  targets: '.box',
  translateX: 250, // число пикселей
  opacity: 0.5,
  duration: 1000
});
  • Числа интерпретируются как конечное значение свойства.
  • Можно использовать отрицательные значения, что особенно важно для координат и смещений.

Строковые значения

Строковые значения (String) применяются, когда необходимо анимировать свойства CSS, которые включают единицы измерения или специфические форматы, например: px, %, deg, em.

anime({
  targets: '.circle',
  width: '200px',
  rotate: '180deg',
  duration: 1200
});
  • Строки, содержащие числа и единицы, парсятся библиотекой и корректно преобразуются в промежуточные состояния.
  • Поддерживаются ключевые CSS-значения вроде auto, inherit и none.

Массивы значений

Для создания анимации по нескольким ключевым точкам можно использовать массивы (Array).

anime({
  targets: '.dot',
  translateX: [0, 100, 50, 150],
  duration: 2000
});
  • Каждый элемент массива рассматривается как последовательное ключевое состояние свойства.
  • В сочетании с easing можно добиться сложных кривых движения.

Функции как параметры

Функции (Function) предоставляют динамическую генерацию значений для каждого целевого элемента. Функция вызывается с аргументами: элемент, индекс, массив всех элементов.

anime({
  targets: '.item',
  translateY: function(el, i) {
    return i * 20; // каждый элемент смещается на 20px относительно предыдущего
  },
  duration: 800
});
  • Позволяет создавать индекс-зависимые анимации.
  • Можно комбинировать с математическими формулами, случайными значениями или внешними данными.

Объекты с диапазоном

Для параметров, где требуется рандомизация или указание диапазона, используются объекты с min и max.

anime({
  targets: '.star',
  translateX: { value: () => Math.random() * 500, duration: 1000 }
});
  • Позволяет генерировать случайные значения для каждого элемента.
  • Объекты могут содержать и другие свойства: duration, delay, easing, что делает каждую анимацию уникальной.

Цвета

Для свойств цвета (color) можно использовать строки в формате HEX, RGB, HSL.

anime({
  targets: '.text',
  color: '#FF0000',
  backgroundColor: 'rgb(0, 255, 0)',
  duration: 1500
});
  • Поддерживается плавная интерполяция между цветами.
  • Можно комбинировать с массивами и функциями для создания динамических градиентов.

Ключевые особенности работы с параметрами

  1. Автоматическое определение типа: anime.js распознаёт, числовое это значение, цвет или строка с единицей.
  2. Поддержка нескольких типов одновременно: массивы могут содержать числа, строки и функции.
  3. Взаимодействие с CSS и SVG: параметры работают одинаково для DOM-элементов и SVG-графики.
  4. Задержка и продолжительность могут быть указаны как числа, функции или объекты, аналогично значениям анимируемых свойств.

Примеры сложных комбинаций

anime({
  targets: '.complex',
  translateX: [0, '50%', 100],
  rotate: () => Math.random() * 360,
  backgroundColor: ['#00F', '#0F0', '#F00'],
  duration: 2000,
  easing: 'easeInOutQuad'
});
  • Числа, строки и функции используются совместно.
  • Позволяет создавать динамические, неповторяющиеся анимации без ручного вычисления всех промежуточных значений.

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

Оглавление