Числовые значения в анимациях задают основу любого вычисления движения: позицию, масштаб, прозрачность, поворот, временные интервалы и промежуточные состояния. В контексте Motion One работа с числами строится вокруг интерполяции значений и преобразования единиц измерения в непрерывные анимационные кривые, совместимые с Web Animations API.
В анимационных системах числовые значения рассматриваются не как статические параметры, а как точки на непрерывной шкале. Любое изменение значения разбивается на множество промежуточных шагов, каждый из которых вычисляется на основе времени прогресса анимации.
В Motion One числовые свойства могут задаваться в нескольких формах:
Ключевой принцип заключается в том, что движок анимации всегда приводит начальное и конечное значения к единому числовому представлению перед интерполяцией.
Интерполяция представляет собой вычисление промежуточных значений между стартовой и конечной точками по формуле:
где p — прогресс анимации в диапазоне от 0 до 1.
В Motion One эта логика применяется не только к простым числам, но и к сложным типам значений, включая трансформации и цвета.
Интерполяция обеспечивает:
При работе с дробными значениями важна точность вычислений, поскольку накопление ошибок может приводить к визуальным артефактам при длительных анимациях.
В анимационных библиотеках ключевую роль играют единицы измерения. В Motion One поддерживается автоматическое преобразование между основными CSS-единицами:
Перед началом интерполяции система выполняет нормализацию значений. Например:
Такая унификация позволяет работать с разнородными значениями как с единым числовым пространством.
Пиксели являются наиболее стабильной единицей измерения, поскольку не зависят от контекста документа. В Motion One пиксельные значения используются как базовый формат при интерполяции геометрических трансформаций.
При анимации translateX:
Преобразование всегда происходит в числовую шкалу, где единицы измерения временно абстрагируются.
Процентные значения зависят от размеров родительского контейнера, что делает их динамическими. В Motion One такие значения требуют дополнительной стадии вычисления:
Например:
Это означает, что итоговая анимация может изменяться при изменении layout без изменения самой анимационной логики.
Повороты являются отдельным типом числовых значений, поскольку имеют циклическую природу. В Motion One поддерживается работа с:
Особенность углов заключается в выборе кратчайшего пути интерполяции. Например:
Система может интерпретировать это как:
или
Выбор зависит от алгоритма нормализации углов, который минимизирует визуально избыточное вращение.
Относительные изменения позволяют анимировать свойства без явного указания абсолютных значений. В Motion One поддерживаются выражения вида:
Такие конструкции преобразуются в:
Это особенно полезно для:
Система сохраняет текущее состояние свойства и пересчитывает его перед каждой новой анимацией.
Временные значения определяют скорость анимации и её поведение. В Motion One основными параметрами являются:
Все временные значения нормализуются к миллисекундам, независимо от исходной формы (например, секунды преобразуются в ms).
Формально:
Временная шкала является основой для вычисления прогресса p в интерполяции.
Числовая интерполяция редко является линейной. В Motion One используется функция сглаживания, изменяющая распределение прогресса:
Фактическая формула принимает вид:
Где easing(p) преобразует линейный прогресс в нелинейный.
Это позволяет создавать визуально естественные движения, несмотря на математически равномерную дискретизацию времени.
Особую сложность представляют значения, содержащие одновременно число и единицу. В Motion One система разбивает такие значения на компоненты:
Пример:
При интерполяции изменяется только числовая часть, тогда как единица сохраняется неизменной.
При работе с числовыми значениями возможны проблемы:
В Motion One такие ситуации обрабатываются через нормализацию и fallback-механизмы, которые приводят значения к безопасному диапазону перед запуском анимации.
Scale-операции используют безразмерные числа. В Motion One масштаб интерпретируется как множитель:
Интерполяция scale всегда проходит через линейную числовую шкалу, поскольку отсутствуют единицы измерения, требующие нормализации.
При одновременной анимации нескольких свойств происходит векторная интерполяция. В Motion One это включает:
Каждое значение интерполируется независимо, после чего объединяется в итоговую матрицу трансформации. Это позволяет избегать конфликтов между свойствами и сохранять предсказуемость движения.
При высокой частоте кадров числовые значения обновляются с учётом временного шага между кадрами. В Motion One прогресс вычисляется как функция реального времени, а не количества кадров:
Это обеспечивает стабильность анимации при различной нагрузке системы и изменяющемся FPS.
Главная цель обработки числовых значений заключается в сохранении непрерывности визуального движения. В Motion One это достигается сочетанием:
Даже при сложных трансформациях система сохраняет линейную зависимость между временем и изменением состояния, обеспечивая предсказуемое поведение анимации без скачков и разрывов.