В основе любой анимации в mo.js лежит функция изменения параметра во времени. Именно она определяет, как объект будет двигаться, изменять форму, прозрачность или масштаб. В отличие от линейной интерполяции, реальные анимации почти всегда используют нелинейные функции, задающие характер ускорения, замедления и инерции.
mo.js опирается на концепцию easing-функций, которые задают
соответствие между прогрессом времени t ∈ [0, 1] и
вычисляемым значением анимационного свойства. Формально:
[ f(t) = value]
где функция f определяет поведение изменения
параметра.
Все функции, применяемые в mo.js, можно разделить на несколько фундаментальных групп:
Каждая группа определяет свой визуальный стиль анимации и применяется в зависимости от задачи.
Линейная функция задаёт равномерное изменение значения:
[ f(t) = t]
В mo.js это соответствует отсутствию easing:
const tween = new mojs.Tween({
duration: 1000,
easing: 'linear',
onUpdate: (p) => {
console.log(p);
}
});Линейное движение используется редко, так как оно визуально выглядит механистично и неестественно. Человеческое восприятие ожидает ускорения в начале или замедления в конце.
Степенные функции являются базой большинства easing-кривых:
[ f(t) = t^n]
При n > 1 движение начинается медленно и ускоряется
ближе к концу. При 0 < n < 1 наблюдается обратный
эффект — резкий старт и замедление.
В mo.js такие функции часто реализованы через предустановленные easing-типы:
easing: 'ease.out'или через модификаторы:
easing: 'quad.out'
easing: 'cubic.in'Ключевые особенности:
in — ускорениеout — замедлениеin-out — комбинированная криваяНаиболее гибкий инструмент — cubic-bezier функции. В mo.js они используются для точного управления динамикой движения.
Общий вид:
[ B(t) = (1 - t)^3 P_0 + 3(1 - t)^2 t P_1 + 3(1 - t)t^2 P_2 + t^3 P_3]
В практической разработке задаются контрольные точки:
easing: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'Контрольные точки влияют на:
P1.x — скорость разгонаP1.y — интенсивность начального импульсаP2.x — точка замедленияP2.y — финальная стабилизацияГрамотный подбор этих значений позволяет имитировать физические процессы без явного физического движка.
mo.js предоставляет easing-функции, имитирующие физические системы: пружины, отскоки, демпфирование.
Поведение пружины описывается уравнением:
[ x(t) = e^{-t} (_d t)]
где:
В mo.js это может выглядеть так:
easing: 'spring(1, 80, 10)'Параметры определяют:
Использование пружинной функции оправдано в интерфейсах, где требуется ощущение “материальности” объектов.
Bounce-функции моделируют падение и отражение от поверхности. Поведение основано на последовательном уменьшении амплитуды:
easing: 'bounce.out'Характерные особенности:
Такие функции применяются для:
Понимание поведения функции невозможно без визуального анализа. В
разработке анимаций часто используется графическое представление кривой
f(t).
Основные параметры визуализации:
Типичная интерпретация:
При создании кастомных easing-кривых полезно визуализировать поведение:
const curve = new mojs.CustomEase({
points: [
{ x: 0, y: 0 },
{ x: 0.2, y: 0.8 },
{ x: 1, y: 1 }
]
});Такой подход позволяет:
Функция не выбирается произвольно — она должна соответствовать смыслу движения.
Оптимальны:
Причина: объект должен “войти” в сцену, а не резко возникнуть.
Используются:
Поведение должно создавать эффект ухода из сцены.
Используются:
Такие функции усиливают визуальный фокус.
Используются:
Главный критерий — отсутствие визуального шума.
В mo.js анимация часто строится как композиция нескольких tween’ов с разными easing-функциями.
Пример структуры:
const timeline = new mojs.Timeline();
timeline.add([
new mojs.Shape({
duration: 600,
easing: 'cubic.out'
}),
new mojs.Shape({
delay: 200,
duration: 800,
easing: 'spring(1, 90, 12)'
})
]);Комбинации позволяют:
Easing-функция напрямую влияет на субъективное ощущение длительности. При одинаковой длительности анимации разные кривые воспринимаются по-разному:
Это свойство используется для управления вниманием пользователя без изменения реального времени анимации.
Типичные проблемы:
Вызывают визуальный дискомфорт и нарушают когнитивную плавность интерфейса.
Легкие объекты с тяжелыми easing-кривыми выглядят неправдоподобно.
Слишком сложные bezier-кривые затрудняют чтение анимации и её поддержку.
Создание эффективной easing-функции начинается с определения сценария движения:
После этого подбираются контрольные точки или параметры физической модели.
Пример:
easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)'Такая кривая создает эффект overshoot — объект “перелетает” конечную точку и возвращается обратно.
Easing-функции являются частью визуального языка интерфейса. Последовательное использование одинаковых кривых в проекте формирует:
Несогласованное использование функций разрушает ощущение целостности системы движения.
При разработке сложных анимационных систем выбор функции становится частью проектирования motion-архитектуры:
Так формируется многоуровневая система управления движением, где каждая функция выполняет строго определенную роль в визуальной композиции.