В библиотеке mo.js управление временной функцией анимации основано на принципе easing — математическом описании скорости изменения значения во времени. Вместо линейного движения от начального к конечному состоянию применяется нелинейная интерполяция, имитирующая физические процессы: ускорение, замедление, инерцию.
Базовая роль easing заключается в управлении восприятием движения. Даже простая трансформация позиции или масштаба приобретает выразительность за счёт изменения кривой скорости.
При линейной интерполяции значение изменяется с постоянной скоростью:
В mo.js линейное поведение встречается как базовый режим, но используется редко, так как не отражает естественную динамику объектов.
В mo.js easing реализуется через набор предустановленных функций и поддержку кастомных кривых. Основные категории:
Каждая категория задаёт характер изменения скорости во времени t ∈ [0, 1], где:
Ease-in описывает поведение, при котором движение начинается медленно и постепенно ускоряется.
Формально это функция, у которой производная увеличивается со временем:
y = t^2
В mo.js часто используется для появления объектов, которые «въезжают» в сцену:
const shape = new mojs.Shape({
left: 0,
top: 0,
scale: { 0: 1 },
duration: 800,
easing: 'ease.in.quad'
});Ease-in создаёт эффект накопления энергии. Объект как бы преодолевает инерцию перед началом движения.
Ease-out противоположен ease-in: движение начинается быстро и постепенно замедляется.
Математическая модель:
y = 1 - (1 - t)^2
Используется для завершения анимаций, когда требуется естественное «оседание» объекта:
const circle = new mojs.Shape({
radius: { 0: 40 },
opacity: { 1: 0 },
duration: 600,
easing: 'ease.out.quad'
});Ease-out имитирует трение и сопротивление среды. Движение выглядит инерционным, без резкой остановки.
Ease-in-out объединяет ускорение в начале и замедление в конце. Это одна из наиболее универсальных форм easing.
Математическая интерпретация:
y =Используется в большинстве UI-анимаций, где требуется естественное движение:
const burst = new mojs.Burst({
radius: { 0: 100 },
count: 10,
children: {
shape: 'circle',
radius: 5,
easing: 'ease.in.out.quad'
}
});Ease-in-out воспринимается как наиболее «человеческая» кривая движения, поскольку сочетает фазу разгона и торможения.
В mo.js easing задаётся строковыми идентификаторами или функциями. Наиболее распространённая схема:
ease.in.quadease.out.quadease.in.out.quadСтруктура обозначения:
ease.[тип].[степень]Где:
Квадратичные функции являются базовыми и наиболее часто применяются.
y = t^2
y = 1 - (1 - t)^2
Ease-in увеличивает ощущение ожидания перед действием. Ease-out снижает резкость завершения. Ease-in-out создаёт непрерывность движения.
В композиционных анимациях mo.js easing влияет на взаимодействие нескольких элементов:
Пример комбинированной сцены:
const burst = new mojs.Burst({
radius: { 0: 120 },
count: 8,
children: {
shape: 'rect',
radius: { 4: 10 },
easing: 'ease.out.quad',
duration: 700
}
});
const ring = new mojs.Shape({
shape: 'circle',
radius: { 0: 60 },
stroke: 'white',
fill: 'none',
easing: 'ease.in.out.cubic',
duration: 900
});Изменение кривой скорости напрямую влияет на когнитивное восприятие интерфейса:
Ease-in и ease-out часто применяются совместно для формирования логики «появление — взаимодействие — исчезновение».
Easing-функции можно интерпретировать через физические аналогии:
Такая модель используется при построении сложных анимационных сцен в mo.js для достижения реалистичности движения.
Помимо предустановленных функций mo.js допускает использование пользовательских кривых на основе cubic-bezier. Это позволяет формировать уникальные паттерны движения, выходящие за пределы стандартных ease-in/out моделей.
Типовая форма:
cubic-bezier(x1, y1, x2, y2)Такие кривые позволяют изменять:
В сложных анимационных системах разные элементы используют разные кривые:
Такое распределение создаёт многослойную динамику сцены, где каждый элемент имеет собственную временную логику.