Анимируемые свойства

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

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

Категории анимируемых свойств

CSS-свойства

Поддерживается большинство CSS-свойств, имеющих числовое или составное числовое значение:

  • width, height
  • margin, padding
  • opacity
  • backgroundColor
  • borderRadius

Пример:

anime({
  targets: '.box',
  width: '300px',
  opacity: 0.5
});

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

  • Единицы измерения можно указывать явно (px, %, em)
  • Цвета интерполируются между значениями (RGB, HEX, HSL)

Transform-свойства

anime.js предоставляет отдельный механизм для трансформаций:

  • translateX, translateY, translateZ
  • scale, scaleX, scaleY
  • rotate, rotateZ
  • skewX, skewY

Пример:

anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',
  scale: 1.5
});

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

  • Не требуется вручную писать transform
  • Несколько трансформаций объединяются автоматически
  • Высокая производительность за счёт GPU

Атрибуты HTML и SVG

Анимация атрибутов осуществляется через параметр attr:

anime({
  targets: 'circle',
  attr: {
    cx: 150,
    r: 50
  }
});

Поддерживаются:

  • SVG-атрибуты (cx, cy, r, d, points)
  • HTML-атрибуты (ограниченно, в зависимости от типа)

Свойства объектов JavaScript

anime.js способен анимировать любые числовые свойства объектов:

const obj = { value: 0 };

anime({
  targets: obj,
  value: 100,
  round: 1,
  update: function() {
    console.log(obj.value);
  }
});

Применение:

  • Кастомная логика
  • Canvas-анимации
  • WebGL
  • Числовые счётчики

Начальные и конечные значения

Автоматическое определение

Если начальное значение не указано, anime.js извлекает его из текущего состояния:

anime({
  targets: '.box',
  translateX: 200
});

Явное задание

anime({
  targets: '.box',
  translateX: [0, 200]
});

Формат:

[начальное, конечное]

Относительные значения

Поддерживаются операторы:

  • +=
  • -=
  • *=

Пример:

anime({
  targets: '.box',
  translateX: '+=100'
});

Работа с единицами измерения

anime.js автоматически определяет и интерполирует единицы:

anime({
  targets: '.box',
  width: ['100px', '50%']
});

Если единицы не указаны, используется:

  • значение по умолчанию (например, px)
  • либо исходное значение элемента

Цветовые значения

Поддерживаемые форматы:

  • HEX (#ff0000)
  • RGB (rgb(255, 0, 0))
  • RGBA
  • HSL

Пример:

anime({
  targets: '.box',
  backgroundColor: ['#ff0000', '#00ff00']
});

Механизм:

  • значения разбиваются на компоненты
  • интерполяция происходит по каждому каналу

Функции как значения

Вместо статических значений можно использовать функции:

anime({
  targets: '.box',
  translateX: function(el, i) {
    return i * 50;
  }
});

Аргументы функции:

  • el — текущий элемент
  • i — индекс
  • l — общее количество элементов

Массивы значений (keyframes)

Позволяют задавать последовательность изменений:

anime({
  targets: '.box',
  translateX: [
    { value: 100, duration: 500 },
    { value: 200, duration: 500 },
    { value: 0, duration: 500 }
  ]
});

Каждый шаг может иметь:

  • value
  • duration
  • easing
  • delay

Раздельное управление свойствами

Каждое свойство может иметь собственные параметры:

anime({
  targets: '.box',
  translateX: {
    value: 250,
    duration: 1000
  },
  opacity: {
    value: 0,
    duration: 500
  }
});

Интерполяция значений

anime.js использует линейную интерполяцию с применением easing-функций.

Общий принцип:

value = start + (end - start) * progress

Где:

  • progress зависит от времени и easing

Easing-функции и их влияние

Пример:

anime({
  targets: '.box',
  translateX: 250,
  easing: 'easeInOutQuad'
});

Типы easing:

  • линейные (linear)
  • ускоряющиеся (easeIn)
  • замедляющиеся (easeOut)
  • комбинированные (easeInOut)
  • пружинные (spring)

Округление значений

Для числовых свойств:

anime({
  targets: obj,
  value: 100,
  round: 1
});

Используется для:

  • счётчиков
  • целочисленных значений
  • пиксельной точности

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

anime.js умеет извлекать числа из строк:

anime({
  targets: '.box',
  boxShadow: '0px 0px 0px rgba(0,0,0,0) → 10px 10px 20px rgba(0,0,0,0.5)'
});

Механизм:

  • строка разбивается на числовые и текстовые части
  • числа интерполируются
  • строка собирается обратно

Задержки и смещения

Каждое свойство может иметь задержку:

anime({
  targets: '.box',
  translateX: {
    value: 200,
    delay: 500
  }
});

Множественные цели (targets)

Можно анимировать:

  • DOM-элементы
  • NodeList
  • массивы
  • объекты
anime({
  targets: ['.box1', '.box2'],
  translateY: 100
});

Особенности производительности

Наиболее эффективные свойства:

  • transform
  • opacity

Менее эффективные:

  • width, height
  • top, left

Причина:

  • первые используют GPU
  • вторые вызывают reflow

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

Пример комплексной анимации:

anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#00ff00',
  opacity: 0.5,
  duration: 2000
});

anime.js синхронизирует все изменения в одном таймлайне.

Динамическое обновление значений

Свойства можно менять во время анимации через callbacks:

anime({
  targets: obj,
  value: 100,
  update: function(anim) {
    console.log(anim.progress);
  }
});

Работа с transform-origin

Для корректной трансформации:

anime({
  targets: '.box',
  rotate: 180,
  transformOrigin: '50% 50%'
});

Сложные случаи: SVG path

Анимация пути:

anime({
  targets: 'path',
  d: [
    { value: 'M10 10 H 90 V 90 H 10 Z' },
    { value: 'M20 20 H 80 V 80 H 20 Z' }
  ]
});

Требования:

  • одинаковое количество точек
  • совместимая структура

Управление прогрессом

Можно управлять вручную:

const animation = anime({
  targets: '.box',
  translateX: 250,
  autoplay: false
});

animation.seek(animation.duration * 0.5);

Итоговые особенности

  • Унифицированный подход к разным типам свойств
  • Автоматическая интерполяция сложных значений
  • Поддержка функций и динамических вычислений
  • Возможность тонкой настройки каждого параметра
  • Высокая производительность при правильном выборе свойств
Оглавление