Вся система измерений в mo.js опирается на модель canvas-рендеринга, где базовой единицей выступает пиксель. Это означает, что большинство параметров анимации, геометрии и трансформаций интерпретируются напрямую через числовые значения, которые в конечном итоге транслируются в координаты и размеры внутри HTML5 Canvas без промежуточных абстракций вроде rem, em или vw.
Координатная плоскость в mo.js наследует поведение canvas: начало
координат располагается в левом верхнем углу области рендеринга, ось X
направлена вправо, ось Y — вниз. Все позиционные параметры объектов
(например, x, y, left,
top в контексте отдельных модулей) интерпретируются как
пиксельные смещения относительно этой системы.
При указании значений:
100 означает смещение на 100 пикселейСубпиксельная точность влияет на плавность анимации: браузер может интерполировать значения между пикселями, обеспечивая более мягкое движение объектов при изменении координат.
Большая часть API mo.js использует «безразмерные» числа. Это ключевая особенность системы измерений: единицы измерения не указываются явно, а подразумеваются контекстом свойства.
Примеры таких параметров:
duration — длительность анимацииdelay — задержка стартаradius — радиус формыstrokeWidth — толщина линииscale — коэффициент масштабированияВо всех этих случаях число интерпретируется как:
Например, значение duration: 800 всегда означает 800
миллисекунд, независимо от других настроек сцены или устройства.
Временная модель mo.js полностью основана на миллисекундах. Это упрощает синхронизацию анимаций внутри timeline и исключает неоднозначность.
Основные принципы:
duration: 1000 — одна секундаdelay: 200 — задержка 0.2 секундыrepeat: 3 — повторение анимации фиксированное число
разВсе временные значения складываются в единую временную шкалу, где timeline выступает как контейнер абсолютного времени. При этом вложенные анимации наследуют временную базу родительского timeline, но не изменяют систему единиц.
Несмотря на доминирование пиксельной модели, mo.js поддерживает строковые значения с процентами для некоторых свойств. Это вводит относительную систему измерений, привязанную к размерам контейнера или экрана.
Примеры:
"100%" — полная ширина или высота контейнера"50%" — половина доступного пространства"0%" — начальная точка отсчётаПроцентная система чаще всего используется для:
Важно, что процентные значения не являются универсальными и применяются только в тех параметрах, где предусмотрена поддержка строкового парсинга. В остальных случаях строка будет либо проигнорирована, либо приведена к числу.
Трансформационные свойства в mo.js используют коэффициентную систему измерений. Это означает, что значение не имеет физической единицы, а представляет собой множитель относительно исходного состояния.
scale: 1 — исходный размерscale: 0.5 — уменьшение в два разаscale: 2 — увеличение в два разаПри этом масштабирование применяется к локальной системе координат объекта, а не к глобальной сцене. Это создаёт вложенную модель трансформаций, где каждый объект сохраняет независимую систему измерений.
Повороты задаются в градусах:
angle: 45 — поворот на 45°angle: 360 — полный оборотЗдесь также отсутствуют единицы измерения в виде строк, используется числовая интерпретация.
Геометрия форм в mo.js строится на простых числовых значениях, интерпретируемых как пиксели:
radius — радиус круга или окружностиstrokeWidth — толщина линии обводкиstrokeDasharray — длины сегментов линииВсе эти параметры напрямую влияют на отрисовку canvas-объекта.
Например, увеличение strokeWidth приводит к физическому
расширению линии в пикселях, без масштабирования всей формы.
Поскольку система измерений основана на пикселях, поведение анимаций зависит от devicePixelRatio. На устройствах с высокой плотностью пикселей (Retina-дисплеи) один логический пиксель может соответствовать нескольким физическим пикселям.
Это приводит к следующим особенностям:
mo.js не вводит собственную систему адаптивных единиц, полагаясь на настройки canvas и браузера.
При анимации числовые значения интерполируются линейно или через easing-функции. В рамках системы измерений это означает, что любые единицы (пиксели, миллисекунды, коэффициенты) участвуют в математической интерполяции без преобразования типов.
Если значение изменяется от 0 до 100, фактически происходит плавный переход по числовой шкале без смены единиц измерения. Это упрощает внутреннюю модель анимации и делает систему предсказуемой.
Некоторые параметры допускают использование как чисел, так и строк. Это создаёт гибридную систему измерений:
100 → интерпретируется как пиксели"100%" → интерпретируется как процент"10px" (в ограниченных случаях) → может быть
приведена к числуТакая неоднородность требует строгого понимания контекста каждого свойства, так как одинаковое значение в разных полях может иметь разный смысл.
Плоская числовая модель mo.js приводит к тому, что вся анимационная система строится как набор математических функций, работающих в едином пространстве значений. Отсутствие сложной типизации единиц делает возможным:
При этом разработчик должен самостоятельно учитывать контекст значений, так как система не выполняет строгую валидацию единиц измерения и допускает неоднозначные интерпретации в пограничных случаях.