mo.js — это JavaScript-библиотека для создания сложных, высокопроизводительных анимаций в браузере с использованием декларативного подхода. Основной акцент сделан на контроле движения объектов, работе с трансформациями, временными функциями и построении анимаций как композиции отдельных модулей.
Библиотека ориентирована на создание визуально выразительных интерфейсов: от микровзаимодействий до полноценных анимационных сцен. В отличие от CSS-анимаций, mo.js предоставляет более гибкий контроль над параметрами движения и позволяет описывать поведение объектов через JavaScript-логику.
mo.js построена на основе объектной модели, где каждая анимация представляется как экземпляр определённого класса. Основные сущности:
Ключевая идея — композиция: сложные эффекты достигаются объединением простых анимационных элементов.
В основе mo.js лежит концепция интерполяции значений во времени. Каждый параметр (позиция, масштаб, прозрачность и т.д.) изменяется от начального значения к конечному в течение заданной длительности.
Пример базовой анимации:
const circle = new mojs.Shape({
shape: 'circle',
radius: { 0: 50 },
duration: 1000
});
circle.play();В данном примере:
radius: { 0: 50 } — интерполяция радиуса от 0 до
50duration — длительность в миллисекундахplay() запускает анимациюmo.js использует декларативное описание анимаций. Вместо пошагового управления кадрами задаётся конечное поведение:
x: { 0: 100 },
opacity: { 1: 0 }Это означает:
x изменяется от 0 до 100Такой подход упрощает создание сложных анимаций и делает код более читаемым.
Shape — базовый визуальный элемент. Поддерживает различные формы:
circlerectpolygonlinezigzagПример:
new mojs.Shape({
shape: 'rect',
width: 100,
height: 100,
fill: 'red'
});Особенности:
Burst используется для создания “взрывных” анимаций — множества объектов, расходящихся из одной точки.
new mojs.Burst({
radius: { 0: 100 },
count: 10,
children: {
shape: 'circle',
radius: 5
}
}).play();Ключевые параметры:
count — количество элементовradius — радиус распространенияchildren — конфигурация дочерних элементовTween — базовый класс для управления временем анимации без привязки к визуальному элементу.
new mojs.Tween({
duration: 1000,
onUpdate(progress) {
console.log(progress);
}
}).play();Используется для:
Timeline позволяет объединять несколько анимаций:
const timeline = new mojs.Timeline();
timeline.add(circle, burst);
timeline.play();Возможности:
mo.js предоставляет мощную систему easing-функций, определяющих характер движения.
Пример:
easing: 'elastic.out'Поддерживаются:
Также возможно создание кастомных кривых:
easing: 'cubic-bezier(0.42, 0, 0.58, 1)'Одной из ключевых особенностей mo.js является гибкая интерполяция:
scale: { 1: 2 }fill: { 'red': 'blue' }x: { '0px': '100px' }delay: 'rand(0, 1000)'mo.js автоматически управляет CSS-transform:
translatescalerotateskewПример:
angle: { 0: 360 },
scale: { 0.5: 1.5 }Все трансформации объединяются в одну строку transform,
что повышает производительность.
mo.js оптимизирована для работы с анимациями:
requestAnimationFrameБиблиотека избегает изменения свойств, вызывающих reflow (например, width/height), предпочитая transform и opacity.
Каждый компонент mo.js можно:
Пример повторного использования конфигурации:
const baseConfig = {
duration: 500,
fill: 'blue'
};
new mojs.Shape({
...baseConfig,
radius: 20
});mo.js предоставляет хуки жизненного цикла:
onStartonUpdateonCompleteПример:
new mojs.Shape({
duration: 1000,
onComplete() {
console.log('Анимация завершена');
}
});Это позволяет:
mo.js активно использует SVG:
Преимущества:
Каждая анимация имеет параметры:
durationdelayrepeatspeedПример:
repeat: 3,
delay: 200,
speed: 2Это позволяет точно контролировать поведение анимации.
Сложные анимации строятся через комбинацию:
Пример концепции:
mo.js часто используется вместе с:
Она не заменяет CSS-анимации, а дополняет их в сложных сценариях.
mo.js представляет собой инструмент для описания анимации как системы взаимосвязанных объектов, где движение, форма и время объединяются в единую декларативную модель.