Первая анимация

Библиотека Motion One представляет собой лёгкий инструмент для создания анимаций в браузере с использованием нативных возможностей Web Animations API. Она ориентирована на высокую производительность и минимальный объём кода.

Установка через пакетный менеджер:

npm install motion

Подключение в модуле:

import { animate } from "motion";

Подключение через CDN:

<script src="https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.min.js"></script>

После подключения становится доступна базовая функция animate, являющаяся ядром библиотеки.

Первая анимация через animate()

Базовая анимация создаётся с помощью функции animate(), которая принимает три основных аргумента: элемент, свойства анимации и параметры.

import { animate } from "motion";

const box = document.querySelector(".box");

animate(
  box,
  { x: 300 },
  { duration: 1 }
);

В этом примере элемент плавно смещается по оси X на 300 пикселей.

Ключевые моменты:

  • первый аргумент — DOM-элемент
  • второй аргумент — конечные значения свойств
  • третий аргумент — настройки анимации

Анимация нескольких свойств

Motion One позволяет изменять сразу несколько CSS-параметров:

animate(
  box,
  {
    x: 200,
    y: 100,
    rotate: 45,
    opacity: 0.5
  },
  {
    duration: 0.8
  }
);

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

Понимание системы трансформаций

Motion One работает с трансформациями напрямую, без необходимости писать transform вручную.

Эквивалент CSS:

transform: translateX(200px) translateY(100px) rotate(45deg);

А в Motion One:

animate(box, {
  x: 200,
  y: 100,
  rotate: 45
});

Такой подход упрощает композицию анимаций и уменьшает вероятность конфликтов в transform-строке.

Управление длительностью и плавностью

Параметр duration задаёт время анимации в секундах:

animate(box, { x: 400 }, { duration: 2 });

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

animate(
  box,
  { x: 400 },
  {
    duration: 1,
    easing: "ease-in-out"
  }
);

Доступные варианты easing:

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out

Также можно использовать кастомные кривые:

easing: [0.42, 0, 0.58, 1]

Анимация появления элементов

Частый сценарий — появление элемента на странице:

animate(
  box,
  {
    opacity: [0, 1],
    scale: [0.8, 1]
  },
  {
    duration: 0.6
  }
);

Использование массива значений задаёт начальное и конечное состояние анимации.

Работа с процентными значениями

Motion One поддерживает строки и относительные значения:

animate(box, {
  x: "50%"
});

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

Последовательные анимации

Анимации можно запускать одна за другой через цепочку промисов:

animate(box, { x: 200 }, { duration: 1 })
  .finished
  .then(() => {
    animate(box, { y: 200 }, { duration: 1 });
  });

Свойство .finished возвращает Promise, который резолвится по завершении анимации.

Параллельные анимации

Несколько элементов можно анимировать одновременно:

const boxes = document.querySelectorAll(".box");

boxes.forEach((el, i) => {
  animate(el, {
    y: 100
  }, {
    delay: i * 0.1,
    duration: 0.5
  });
});

Такой подход используется для создания каскадных эффектов.

Контроль задержки

Параметр delay задаёт паузу перед стартом анимации:

animate(box, {
  x: 300
}, {
  delay: 0.5,
  duration: 1
});

Задержка измеряется в секундах и может использоваться для синхронизации сцен.

Управление состоянием анимации

Объект, возвращаемый animate(), позволяет управлять процессом:

const animation = animate(box, {
  x: 500
}, {
  duration: 2
});

animation.pause();
animation.play();
animation.cancel();

Основные методы:

  • pause() — остановка
  • play() — продолжение
  • cancel() — полное прерывание

Анимация с ключевыми кадрами

Motion One поддерживает ключевые кадры:

animate(
  box,
  {
    x: [0, 100, 200, 0],
    rotate: [0, 90, 180, 0]
  },
  {
    duration: 2
  }
);

Каждое значение массива соответствует промежуточному состоянию.

Привязка к событиям

Анимации часто запускаются по событиям DOM:

button.addEventListener("click", () => {
  animate(box, {
    scale: 1.2
  }, {
    duration: 0.3
  });
});

Такой подход используется для интерактивных интерфейсов и микровзаимодействий.

Базовая структура анимационного кода

Типичная структура использования Motion One в проекте включает:

  • выбор DOM-элемента
  • определение свойств анимации
  • настройку параметров
  • запуск через animate
import { animate } from "motion";

const element = document.querySelector(".item");

animate(
  element,
  { opacity: 1, y: 0 },
  { duration: 0.6, easing: "ease-out" }
);

Использование стартовых и конечных состояний

Часто элементы задаются скрытыми в CSS:

.item {
  opacity: 0;
  transform: translateY(20px);
}

И анимация переводит их в финальное состояние:

animate(item, {
  opacity: 1,
  y: 0
}, {
  duration: 0.5
});

Такой подход обеспечивает предсказуемое поведение интерфейса при загрузке.

Оглавление