Библиотека mo.js предоставляет модель анимации, ориентированную на декларативное описание изменений свойств объектов во времени. Основной принцип работы заключается в том, что любое визуальное изменение представляется как переход параметра от начального значения к конечному с применением функций интерполяции и временных кривых.
Геометрические свойства формируют основу большинства анимаций интерфейса и визуальных эффектов. В mo.js они реализуются через трансформации, применяемые к DOM-элементам или SVG-объектам.
Свойства x и y определяют смещение элемента
относительно исходного положения. Значения интерпретируются как пиксели,
а анимация строится как линейная или нелинейная интерполяция между
координатами.
const move = new mojs.Html({
el: '.box',
x: { 0: 200 },
y: { 0: -100 },
duration: 800
});При работе с несколькими осями важно учитывать независимость каналов:
x и y могут иметь различные функции easing,
создавая сложные траектории движения.
Свойство scale управляет пропорциональным изменением
размера. Использование дробных значений позволяет реализовать эффекты
“пульсации”, увеличения акцента или визуального отклика на
взаимодействие.
const pulse = new mojs.Html({
el: '.icon',
scale: { 1: 1.5 },
duration: 400,
easing: 'ease.out'
});Масштабирование часто комбинируется с прозрачностью и изменением цвета, что создаёт комплексные переходы состояния.
Свойство rotate определяет угол поворота элемента.
Значения могут задаваться в градусах и интерполируются по кратчайшему
или заданному пути.
const spin = new mojs.Html({
el: '.arrow',
rotate: { 0: 360 },
duration: 1000
});При многократных циклах вращения важно учитывать накопление угла и поведение при повторном запуске анимации, чтобы избежать скачков значения.
Свойство opacity используется для управления видимостью
элемента. Оно особенно эффективно при создании переходов появления и
исчезновения интерфейсных компонентов.
const fade = new mojs.Html({
el: '.modal',
opacity: { 0: 1 },
duration: 300
});Комбинация изменения прозрачности с масштабированием позволяет формировать эффект “приближения из фона”, широко используемый в модальных окнах и всплывающих уведомлениях.
Работа с цветами в mo.js основана на интерполяции RGB или RGBA значений. Поддерживается плавный переход между двумя цветами, что используется для выделения состояний интерфейса.
const colorChange = new mojs.Html({
el: '.button',
backgroundColor: { '#ff0000': '#00ff00' },
duration: 600
});Цветовая интерполяция особенно эффективна при анимации состояния hover, active и success/error сигналов. При этом важно учитывать восприятие контраста на протяжении всей анимации.
SVG-анимации занимают ключевое место в mo.js благодаря возможности управлять отдельными атрибутами графики.
Анимация “рисования” пути достигается через управление свойствами
stroke-dasharray и stroke-dashoffset.
Изменение смещения создаёт эффект постепенного появления линии.
const draw = new mojs.Shape({
shape: 'path',
stroke: '#000',
strokeWidth: 2,
strokeDasharray: '100%',
strokeDashoffset: { '100%': '0%' },
duration: 1200
});Этот подход широко используется для логотипов, иконок и декоративных элементов интерфейса.
Свойство path позволяет изменять геометрию SVG-фигур.
Интерполяция между двумя path-значениями требует совместимости контуров,
иначе происходит упрощённая трансформация.
const morph = new mojs.Shape({
shape: 'path',
path: {
'M0 0 L50 0 L25 50 Z': 'M0 0 L50 50 L0 50 Z'
},
duration: 900
});Морфинг применяется для визуального переключения состояний и создания динамических иконок.
Свойства strokeWidth, stroke,
strokeOpacity позволяют управлять визуальной плотностью
контуров.
const borderAnim = new mojs.Shape({
strokeWidth: { 2: 8 },
strokeOpacity: { 1: 0.3 },
duration: 700
});Изменение толщины обводки часто используется для привлечения внимания к активным элементам или для визуального подтверждения действия.
Наиболее выразительные эффекты достигаются при одновременной анимации нескольких групп свойств. В mo.js каждая группа интерпретируется независимо, но синхронизируется по временной шкале.
const complex = new mojs.Html({
el: '.card',
x: { 0: 100 },
scale: { 1: 1.1 },
opacity: { 0.8: 1 },
backgroundColor: { '#ffffff': '#f0f0f0' },
duration: 800
});Одновременное изменение нескольких параметров создаёт эффект “живого” интерфейса, где элемент реагирует как единое целое.
Каждое свойство может иметь собственную задержку или длительность, формируя многослойные анимации.
const layered = new mojs.Html({
el: '.panel',
x: { 0: 200 },
duration: 1000,
delay: 0,
opacity: { 0: 1 },
duration: 600,
delay: 200
});Такая структура позволяет разделять движение и появление, создавая более естественные переходы состояния.
Свойство boxShadow используется для создания иллюзии
подъёма элемента над поверхностью. Интерполяция параметров тени
позволяет управлять глубиной и мягкостью.
const shadow = new mojs.Html({
el: '.button',
boxShadow: {
'0 0 0 rgba(0,0,0,0)': '0 10px 20px rgba(0,0,0,0.3)'
},
duration: 500
});Изменение тени в связке с масштабированием усиливает эффект физического отклика интерфейса.
Хотя прямой интерполяции градиентов ограниченно, изменение CSS-значений позволяет создавать переходы между состояниями с разными визуальными схемами.
const gradient = new mojs.Html({
el: '.hero',
background: {
'linear-gradient(0deg, #000, #333)':
'linear-gradient(0deg, #ff0000, #000)'
},
duration: 1200
});Такие анимации применяются для фоновых переходов и смены тематических режимов интерфейса.
Свойства clip-path и маски позволяют анимировать
видимость отдельных частей элемента. Это используется для эффектов
раскрытия и “разрезания” интерфейса.
const reveal = new mojs.Html({
el: '.image',
clipPath: {
'inset(0 100% 0 0)': 'inset(0 0 0 0)'
},
duration: 700
});Такие анимации особенно эффективны в презентационных интерфейсах и лендингах.
Хотя mo.js не предназначен для поэлементной анимации символов, свойства контейнера позволяют создавать эффекты появления текста через прозрачность, смещение и масштаб.
const textAnim = new mojs.Html({
el: '.title',
opacity: { 0: 1 },
y: { 20: 0 },
duration: 500
});Комбинация этих свойств формирует эффект плавного “подъёма” текста в поле зрения.
mo.js поддерживает работу как с абсолютными, так и с относительными значениями. Проценты особенно полезны при работе с адаптивными интерфейсами.
const responsive = new mojs.Html({
el: '.progress',
width: { '0%': '100%' },
duration: 1000
});Процентная интерполяция обеспечивает масштабируемость анимаций без привязки к конкретным пиксельным значениям.
Каждое свойство в mo.js может иметь собственную функцию easing, влияющую на характер изменения значения. Это позволяет формировать независимую динамику для разных параметров одного объекта.
Разделение поведения свойств по кривым интерполяции приводит к асимметричным анимациям, где движение, цвет и масштаб не совпадают по восприятию времени, создавая сложную визуальную структуру.