Интеграция с CSS свойствами

Библиотека mo.js предоставляет декларативный подход к анимациям, однако в основе её работы лежит манипуляция CSS-свойствами элементов. Любая анимация в mo.js — это интерполяция значений между начальным и конечным состоянием, которые затем применяются к DOM-элементам через inline-стили или трансформации.

Ключевой объект — mojs.Html, предназначенный для анимации существующих HTML-элементов. Через него происходит прямое связывание JavaScript-анимации с CSS.

const anim = new mojs.Html({
  el: '#box',
  x: { 0: 200 },
  duration: 1000
});

В данном примере свойство x транслируется в CSS transform: translateX(...).

Маппинг свойств mo.js на CSS

mo.js использует абстрактные свойства, которые преобразуются в конкретные CSS-значения:

Свойство mo.js CSS-аналог
x, y transform: translate(...)
scale transform: scale(...)
rotate transform: rotate(...)
opacity opacity
backgroundColor background-color
borderRadius border-radius

Пример комбинированной трансформации:

new mojs.Html({
  el: '#circle',
  x: { 0: 100 },
  scale: { 1: 1.5 },
  rotate: { 0: 180 },
  duration: 800
});

mo.js объединяет эти параметры в единое CSS-свойство transform, что повышает производительность.

Работа с transform и GPU-ускорением

mo.js активно использует transform и opacity, поскольку они:

  • не вызывают reflow (перерасчёт layout)
  • обрабатываются GPU
  • обеспечивают плавность анимации

Пример:

new mojs.Html({
  el: '#item',
  y: { 0: -50 },
  opacity: { 0: 1 },
  duration: 600
});

Это эквивалентно:

transform: translateY(-50px);
opacity: 1;

Анимация цветов

mo.js поддерживает интерполяцию цветов в различных форматах:

  • HEX
  • RGB
  • RGBA
  • HSL

Пример:

new mojs.Html({
  el: '#box',
  backgroundColor: { '#ff0000': '#0000ff' },
  duration: 1000
});

В процессе анимации библиотека вычисляет промежуточные значения цвета и применяет их к CSS.

Работа с единицами измерения

mo.js автоматически определяет единицы измерения:

  • px — по умолчанию
  • %
  • deg — для вращения

Пример:

new mojs.Html({
  el: '#block',
  x: { '0%': '100%' },
  duration: 1200
});

Также возможно явное указание:

x: { '0px': '300px' }

Кастомные CSS-свойства

mo.js позволяет анимировать произвольные CSS-свойства через props:

new mojs.Html({
  el: '#custom',
  props: {
    'font-size': { '16px': '32px' },
    'letter-spacing': { '0px': '5px' }
  },
  duration: 700
});

Это особенно полезно для типографики и нестандартных эффектов.

Использование CSS-переменных

Современные браузеры поддерживают CSS custom properties (--var). mo.js может анимировать их:

new mojs.Html({
  el: '#element',
  props: {
    '--main-color': { '#ff0000': '#00ff00' }
  },
  duration: 1000
});

В CSS:

#element {
  color: var(--main-color);
}

Синхронизация с CSS-анимациями

mo.js может работать совместно с CSS-анимациями и переходами:

  • запуск JS-анимации после CSS transition
  • комбинирование эффектов

Пример запуска после события:

element.addEventListener('transitionend', () => {
  anim.play();
});

Управление easing-функциями

mo.js предоставляет гибкую систему easing, аналогичную CSS transition-timing-function.

Пример:

new mojs.Html({
  el: '#box',
  x: { 0: 200 },
  easing: 'cubic.out',
  duration: 1000
});

Соответствие CSS:

transition-timing-function: cubic-bezier(...);

mo.js использует собственные кривые, но допускает кастомные функции.

Управление стилями через callbacks

Для тонкой настройки можно использовать lifecycle-хуки:

new mojs.Html({
  el: '#box',
  x: { 0: 100 },
  duration: 500,
  onUpdate(progress) {
    this.el.style.boxShadow = `0 0 ${progress * 20}px rgba(0,0,0,0.5)`;
  }
});

Это позволяет динамически изменять CSS вне стандартных параметров.

Комбинирование с классами CSS

Иногда удобнее переключать классы:

onStart() {
  this.el.classList.add('active');
}

CSS:

.active {
  filter: blur(5px);
}

Таким образом, mo.js управляет состояниями, а CSS — визуальным оформлением.

Производительность и оптимизация

Ключевые рекомендации:

  • использовать transform и opacity
  • избегать анимации width, height, top, left
  • минимизировать изменения layout
  • группировать анимации через mojs.Timeline

Пример:

const timeline = new mojs.Timeline();

timeline.add(
  new mojs.Html({ el: '#a', x: { 0: 100 } }),
  new mojs.Html({ el: '#b', scale: { 1: 2 } })
);

timeline.play();

Интеграция с inline-стилями и computed styles

mo.js не читает автоматически текущие computed styles, если не указано начальное значение. Поэтому важно явно задавать стартовые параметры:

new mojs.Html({
  el: '#box',
  opacity: { 0.5: 1 }
});

Иначе поведение может быть непредсказуемым.

Ограничения и особенности

  • нельзя анимировать все CSS-свойства (например, display)
  • сложные layout-свойства требуют обходных решений
  • transform перезаписывается полностью, если используется вне mo.js

Решение — объединение всех transform-эффектов внутри одной анимации.

Практический пример комплексной интеграции

new mojs.Html({
  el: '#card',
  x: { 0: 300 },
  scale: { 1: 1.2 },
  rotate: { 0: 10 },
  backgroundColor: { '#ffffff': '#f0f0f0' },
  borderRadius: { '0%': '20%' },
  duration: 800,
  easing: 'expo.out'
});

CSS:

#card {
  width: 200px;
  height: 100px;
}

Результат:

  • перемещение через transform
  • масштабирование и поворот
  • изменение цвета и формы

Все изменения синхронизированы и выполняются через единый механизм интерполяции.

Расширенные сценарии

1. Анимация SVG через CSS-подобные свойства

new mojs.Html({
  el: 'svg path',
  props: {
    strokeDashoffset: { 100: 0 }
  }
});

2. Псевдо-3D эффекты

new mojs.Html({
  el: '#box',
  rotateY: { 0: 180 },
  duration: 1000
});

mo.js добавляет transform: rotateY(...).

Взаимодействие с внешними стилями

При наличии CSS:

#box {
  transform: scale(1.5);
}

и mo.js:

scale: { 1: 2 }

mo.js перезапишет transform. Поэтому необходимо:

  • либо управлять всем через mo.js
  • либо использовать вложенные элементы

Итоговая архитектура интеграции

  • mo.js управляет динамикой (временные изменения)
  • CSS отвечает за базовую стилизацию
  • transform и opacity — основной канал взаимодействия
  • props — мост к произвольным свойствам
  • callbacks — расширение возможностей beyond CSS

Такой подход позволяет строить сложные, производительные и гибкие анимационные системы, сохраняя чистоту архитектуры и разделение ответственности между стилями и логикой.

Оглавление