Единицы измерения

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

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

Поддерживаемые единицы

anime.js работает с большинством стандартных CSS-единиц:

Абсолютные единицы:

  • px — пиксели (наиболее часто используемая единица)
  • pt, cm, mm, in — используются редко, но поддерживаются

Относительные единицы:

  • % — проценты относительно родительского элемента
  • em — относительно размера шрифта текущего элемента
  • rem — относительно корневого размера шрифта

Углы:

  • deg — градусы
  • rad — радианы
  • turn — обороты

Временные значения (в контексте CSS):

  • s, ms — используются в параметрах времени анимации, но не как анимируемые свойства

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

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

anime({
  targets: '.box',
  translateX: 250 // интерпретируется как 250px
});

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

Явное указание единиц

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

anime({
  targets: '.box',
  width: '50%',
  translateX: '10rem',
  rotate: '1turn'
});

Это особенно важно при работе с адаптивными интерфейсами.

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

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

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

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

Работа с трансформациями

Свойства трансформации (translate, rotate, scale) имеют свои особенности:

translate (смещение):

anime({
  targets: '.box',
  translateX: '100px',
  translateY: '50%'
});

rotate (вращение):

anime({
  targets: '.box',
  rotate: '360deg'
});

scale (масштаб):

anime({
  targets: '.box',
  scale: 2 // без единицы, это множитель
});

Важно учитывать, что scale не использует единицы измерения — это относительное значение.

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

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

  • += — увеличение
  • -= — уменьшение
  • *= — умножение

Примеры:

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

Относительные значения особенно полезны при создании последовательных анимаций.

Смешивание единиц

Смешивание разных единиц в одной анимации возможно, но требует осторожности:

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

В таких случаях:

  • anime.js вычисляет текущее значение
  • приводит его к пикселям
  • затем интерполирует

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

Единицы и transform-origin

При работе с трансформациями важно учитывать transform-origin:

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

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

Цветовые значения как отдельный тип

Хотя цвета не являются единицами измерения в классическом смысле, anime.js обрабатывает их аналогично:

anime({
  targets: '.box',
  backgroundColor: ['#ff0000', 'rgb(0, 0, 255)']
});

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

  • HEX
  • RGB / RGBA
  • HSL

Внутри происходит преобразование в единое представление для интерполяции.

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

Некоторые свойства не требуют единиц:

anime({
  targets: '.box',
  opacity: 0.5,
  scale: 1.2,
  zIndex: 10
});

Такие значения интерпретируются как абстрактные числа.

Динамические значения и функции

Единицы можно комбинировать с функциями:

anime({
  targets: '.box',
  translateX: (el, i) => `${i * 20}px`
});

Функция должна возвращать строку с корректной единицей.

Значения из текущего состояния

anime.js умеет извлекать текущие значения элементов:

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

Если начальное значение не указано, оно будет считано из computed styles.

Особенности работы с процентами

Проценты (%) зависят от контекста:

  • для width, height — относительно родителя
  • для translate — относительно самого элемента
anime({
  targets: '.box',
  translateX: '100%' // сдвиг на ширину самого элемента
});

Это поведение соответствует CSS-спецификации.

Производительность и выбор единиц

Для оптимальной производительности рекомендуется:

  • использовать transform вместо top/left
  • отдавать предпочтение px или %
  • избегать частого пересчёта сложных единиц (em, rem) в динамических анимациях

Пример оптимального подхода:

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

Преобразование единиц внутри anime.js

Внутренний механизм работы:

  1. Определение типа значения
  2. Парсинг числа и единицы
  3. Приведение к единому формату (чаще всего пиксели)
  4. Интерполяция
  5. Обратное применение единицы

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

Ошибки и подводные камни

Несовместимые единицы:

anime({
  targets: '.box',
  width: ['100px', 'auto'] // ошибка
});

Отсутствие единицы:

anime({
  targets: '.box',
  width: 100 // может работать не всегда корректно
});

Смешивание контекстов:

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

Практические рекомендации

  • Использовать одинаковые единицы в пределах одной анимации
  • Явно указывать единицы для читаемости кода
  • Избегать auto в анимациях
  • Проверять контекст процентов
  • Предпочитать transform-свойства

Примеры комплексного использования

anime({
  targets: '.card',
  translateX: ['0%', '100%'],
  rotate: ['0deg', '1turn'],
  scale: [1, 1.5],
  duration: 2000,
  easing: 'easeInOutQuad'
});

Здесь одновременно используются:

  • проценты
  • градусы
  • безразмерные значения

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

Оглавление