Первый пример анимации

Для начала требуется подключить библиотеку mo.js к проекту. Чаще всего используется CDN:

<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>

После подключения глобальный объект mojs становится доступен в коде.

Базовая концепция анимации в mo.js

В основе библиотеки лежит идея создания объектов-анимаций, которые описываются через параметры:

  • геометрическая форма (shape)
  • продолжительность (duration)
  • трансформации (scale, rotate, translate)
  • цветовые переходы (fill, stroke)
  • easing-функции

Каждая анимация — это экземпляр класса, чаще всего mojs.Shape.

Создание первого объекта

Простейшая анимация создаётся следующим образом:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: 50,
  fill: 'red',
  duration: 1000
});

circle.play();

Разбор параметров:

  • shape: 'circle' — тип фигуры (круг)
  • radius: 50 — радиус в пикселях
  • fill: 'red' — цвет заливки
  • duration: 1000 — длительность анимации в миллисекундах

Метод .play() запускает анимацию.

Добавление трансформации

Анимация становится заметной, если задать изменение параметров:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 50 },
  fill: 'red',
  duration: 1000
});

circle.play();

Здесь используется объект { 0: 50 }, означающий анимацию от 0 до 50.

Позиционирование элемента

По умолчанию объект появляется в центре экрана. Положение можно изменить:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 50 },
  fill: 'red',
  left: 100,
  top: 100,
  duration: 1000
});

circle.play();

Параметры:

  • left — смещение по горизонтали
  • top — смещение по вертикали

Анимация прозрачности

Добавление fade-эффекта:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 50 },
  fill: 'red',
  opacity: { 0: 1 },
  duration: 1000
});

circle.play();

Это создаёт плавное появление круга.

Использование easing-функций

Для управления динамикой движения применяется параметр easing:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 50 },
  fill: 'red',
  duration: 1000,
  easing: 'elastic.out'
});

circle.play();

Популярные варианты easing:

  • linear.none
  • quad.in
  • quad.out
  • elastic.out
  • bounce.out

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

Цвет может изменяться во времени:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: 50,
  fill: { 'red': 'blue' },
  duration: 1000
});

circle.play();

В данном случае происходит переход от красного к синему.

Комбинирование свойств

Несколько анимаций можно объединять:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 50 },
  fill: { 'red': 'blue' },
  opacity: { 0: 1 },
  scale: { 0: 1.5 },
  duration: 1000,
  easing: 'quad.out'
});

circle.play();

Здесь одновременно изменяются:

  • размер
  • цвет
  • прозрачность
  • масштаб

Работа с DOM-контейнером

По умолчанию элементы добавляются в document.body. Можно указать контейнер:

const circle = new mojs.Shape({
  parent: document.getElementById('container'),
  shape: 'circle',
  radius: { 0: 50 },
  fill: 'red',
  duration: 1000
});

circle.play();

Повтор и задержка

Анимацию можно повторять:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 50 },
  fill: 'red',
  duration: 1000,
  repeat: 2,
  delay: 500
});

circle.play();
  • repeat — количество повторов
  • delay — задержка перед стартом

Цепочки анимаций

Несколько анимаций можно запускать последовательно:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 50 },
  fill: 'red',
  duration: 1000
});

const circle2 = new mojs.Shape({
  shape: 'rect',
  radius: { 0: 50 },
  fill: 'blue',
  duration: 1000,
  delay: 1000
});

circle.play();
circle2.play();

Timeline для управления

Для более сложных сценариев используется Timeline:

const timeline = new mojs.Timeline();

const circle = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 50 },
  fill: 'red',
  duration: 1000
});

const rect = new mojs.Shape({
  shape: 'rect',
  radius: { 0: 50 },
  fill: 'blue',
  duration: 1000
});

timeline.add(circle, rect);
timeline.play();

Timeline позволяет:

  • синхронизировать анимации
  • запускать их одновременно
  • управлять общей длительностью

Частые ошибки

1. Отсутствие вызова .play() Анимация не запускается автоматически.

2. Неверный формат диапазонов Нужно использовать объект { from: to }, а не массив.

3. Конфликт с CSS CSS-стили могут перекрывать визуальные свойства.

Минимальный полный пример

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>
</head>
<body>

<script>
  const circle = new mojs.Shape({
    shape: 'circle',
    radius: { 0: 60 },
    fill: { 'orange': 'yellow' },
    opacity: { 0: 1 },
    duration: 1200,
    easing: 'bounce.out'
  });

  circle.play();
</script>

</body>
</html>

Ключевые особенности первого примера

  • декларативное описание анимации
  • отсутствие прямой работы с DOM-стилями
  • плавные переходы через интерполяцию значений
  • возможность масштабирования сложности без изменения структуры кода
Оглавление