Единицы измерения в значениях

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

Ключевая особенность — разделение типов значений:

  • числовые (unitless)
  • строковые с единицами
  • относительные выражения
  • функции генерации значений

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

Безразмерные значения и внутренняя нормализация

Большая часть свойств mo.js работает с безразмерными числами:

  • scale
  • opacity
  • angle
  • progress
  • x, y, z (в контексте трансформаций)

Масштабирование

scale: 1.5

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

Прозрачность

opacity: 0.6

Диапазон нормализован в интервале от 0 до 1, где единицы измерения не применяются в принципе.

Углы

angle: 180

Угловые значения задаются в градусах. Несмотря на отсутствие явного указания единиц, система интерпретирует их как degrees по умолчанию.

Пиксели в геометрических свойствах

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

x: 200,
y: '150px'

Оба варианта эквивалентны, поскольку числовое значение трактуется как пиксельное смещение в координатной системе canvas или DOM-преобразований.

Смешивание форматов

{
  width: 300,
  height: '200px',
  radius: 50
}

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

Процентные значения и относительная геометрия

Проценты применяются в контексте размеров контейнера или родительского элемента. Строковый формат обязателен.

x: '50%',
y: '20%'

Интерпретация процентов

  • 50% по оси X означает центрирование относительно ширины контейнера
  • 100% соответствует правому или нижнему краю области

Внутри mo.js процентные значения преобразуются в пиксели во время инициализации или на этапе пересчёта при изменении размеров сцены.

Угловые единицы и поворотные трансформации

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

angle: '90'

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

Вектор поворота применяется к transform-origin объекта, если он определён, либо к геометрическому центру.

Временные параметры и миллисекунды

Все временные характеристики в mo.js базируются на миллисекундах:

  • duration
  • delay
  • repeatDelay
duration: 600,
delay: 200

Строковые временные единицы ("1s", "500ms") не являются нативной частью модели и требуют ручного преобразования перед передачей в библиотеку.

Временная нормализация

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

  • 1s → 1000
  • 0.5s → 500

Строковые значения и CSS-подобные форматы

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

strokeWidth: '5px'

или

borderWidth: '2px'

Однако такие значения чаще всего нормализуются в числовые пиксели до начала анимации.

Относительные выражения и арифметика значений

mo.js поддерживает выражения, позволяющие строить динамические изменения значений.

x: '+=100',
y: '-=50'

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

Поведение относительных операторов

  • += добавляет значение
  • -= вычитает значение
  • *= масштабирует относительно текущего значения
scale: '*=1.2'

Подобная модель позволяет строить цепочки трансформаций без ручного пересчёта координат.

Функциональные генераторы значений

В качестве значений допускаются функции, возвращающие число или строку.

x: function () {
  return Math.random() * 300;
}

Функции вычисляются на этапе инициализации или перед каждым тиком анимации, в зависимости от конфигурации tween/timeline.

Использование контекста

Функции могут принимать параметры состояния анимации:

  • прогресс
  • индекс
  • текущее время

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

Случайные значения и диапазоны

mo.js предоставляет встроенную систему генерации случайных значений:

x: 'rand(0, 300)'

или

angle: 'rand(-180, 180)'

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

Поведение rand()

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

Смешанные типы значений и их интерполяция

В одном tween могут комбинироваться различные типы значений:

{
  x: 0,
  y: '100%',
  angle: 45,
  scale: 1.2
}

Движок приводит все значения к внутреннему числовому представлению перед интерполяцией.

Проблемные случаи

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

Нормализация значений внутри движка

Перед запуском анимации выполняется этап преобразования:

  1. парсинг строковых значений
  2. преобразование единиц в пиксели или нормализованные коэффициенты
  3. замена относительных выражений на функции
  4. кэширование результатов

Этот этап критичен для производительности при большом количестве объектов в timeline.

Практика выбора единиц в зависимости от контекста

Геометрия и позиционирование

  • пиксели для точных смещений
  • проценты для адаптивной сцены

Трансформации

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

Время

  • исключительно миллисекунды

Углы

  • числовые значения в градусах

Ошибки при работе с единицами

Наиболее частые проблемы связаны с неявной типизацией:

  • передача "100" вместо 100
  • использование "1s" без преобразования
  • смешивание px и % без учета контейнера
  • попытка интерполировать строку как число

Такие случаи приводят к резкому скачку значений или отсутствию анимации.

Поведение при конфликте типов

При конфликте типов mo.js применяет стратегию приведения:

  • строка с числом → число
  • значение без единицы → пиксели или коэффициенты
  • некорректная строка → игнорирование свойства

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

Влияние единиц на производительность

Чем больше строковых и вычисляемых значений используется, тем выше стоимость предварительной обработки. Наиболее быстрыми считаются:

  • чистые числа
  • заранее нормализованные пиксели
  • фиксированные коэффициенты

Наиболее затратными:

  • функции
  • rand-выражения
  • строки с единицами, требующие парсинга
Оглавление