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

Velocity.js выполняет анимации, работая с числовыми значениями свойств CSS и DOM. При этом ключевую роль играет корректная интерпретация единиц измерения. Библиотека разбирает строковые значения, выделяет числовую часть и единицу, после чего интерполирует только число, сохраняя или преобразуя единицу в зависимости от контекста свойства.

Основной принцип:

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

Такой подход позволяет работать с привычными CSS-значениями без необходимости вручную переводить их в числовой формат.

Пиксели как базовая единица

Наиболее часто используемая единица в Velocity.js — пиксели. Большинство свойств DOM по умолчанию интерполируются именно в пикселях.

Пример:

Velocity(element, { left: "300px" }, 1000);

Если исходное значение было "0px", а конечное "300px", библиотека вычисляет промежуточные значения как числа:

  • 0 → 300
  • с постепенным увеличением в течение времени анимации

При этом единица px не изменяется, так как она является базовой для большинства layout-свойств.

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

Velocity(element, { top: 200 }, 1000);

Относительные величины и процентные значения

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

Velocity(element, { width: "50%" }, 800);

Процесс включает несколько этапов:

  • получение текущего computedStyle
  • вычисление процентного значения относительно родителя
  • преобразование в абсолютное число
  • интерполяция

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

Единицы в трансформациях

Transform-свойства (translate, scale, rotate) обрабатываются особым образом. Velocity.js нормализует значения и разделяет их по типам:

translateX / translateY

Эти свойства поддерживают пиксели и проценты:

Velocity(element, { translateX: "100px" }, 600);
Velocity(element, { translateY: "50%" }, 600);

Проценты в трансформациях вычисляются относительно размеров самого элемента, а не родителя.

scale

Масштабирование не использует единицы измерения:

Velocity(element, { scale: 1.5 }, 600);

Здесь применяется чистое число, где:

  • 1 = исходный размер
  • 1.5 = увеличение на 50%
  • 0.5 = уменьшение вдвое

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

rotate

Для углов применяются специальные единицы:

  • deg — градусы
  • rad — радианы
Velocity(element, { rotateZ: "180deg" }, 700);
Velocity(element, { rotateZ: "3.14rad" }, 700);

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

Временные единицы

Параметр длительности анимации в Velocity.js задаётся в миллисекундах:

Velocity(element, { opacity: 1 }, 1000);

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

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

  • "fast"
  • "slow"

Эти значения преобразуются в фиксированные временные интервалы внутри библиотеки.

Механизм обработки времени сводится к нормализации:

  • строковые значения → число в миллисекундах
  • число → прямое использование как ms

Безразмерные значения и автоматическая интерпретация

Некоторые CSS-свойства не требуют единиц измерения. Velocity.js автоматически определяет такие свойства и не добавляет к ним единицы.

Примеры:

Velocity(element, { opacity: 0.5 }, 500);
Velocity(element, { zIndex: 10 }, 500);
Velocity(element, { flexGrow: 2 }, 500);

Особенность обработки:

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

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

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

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

Прибавление

Velocity(element, { left: "+=50px" }, 400);

Уменьшение

Velocity(element, { top: "-=20px" }, 400);

Умножение

Velocity(element, { width: "*=1.2" }, 400);

Механизм работы:

  • текущие computed значения извлекаются
  • применяется арифметическая операция
  • результат интерполируется как обычное значение с единицей

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

Смешанные единицы и нормализация

При анимации между значениями с разными единицами Velocity.js выполняет приведение к общей системе измерений.

Пример:

Velocity(element, { width: "100px" }, 500);
Velocity(element, { width: "50%" }, 500);

Алгоритм обработки:

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

Если единицы несовместимы (например, px и deg), библиотека применяет специализированные преобразования или игнорирует некорректные переходы в зависимости от свойства.

Особенности вычисляемых значений браузера

Velocity.js опирается на computed styles, что влияет на интерпретацию единиц:

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

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

Контекст и влияние layout-системы

Единицы измерения в Velocity.js тесно связаны с layout-моделью браузера. Изменения зависят от:

  • размеров родительских элементов
  • box-model (padding, border)
  • текущего состояния DOM
  • вычисленных значений CSS

Поэтому одинаковые анимации могут давать разные результаты в зависимости от контекста разметки, особенно при использовании процентов и viewport-зависимых значений.

Viewport-единицы

Поддержка vw и vh осуществляется через вычисление текущего размера окна браузера:

Velocity(element, { width: "50vw" }, 600);
Velocity(element, { height: "30vh" }, 600);

Процесс:

  • получение innerWidth / innerHeight
  • вычисление процентов
  • преобразование в пиксели
  • дальнейшая интерполяция

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

Оглавление