Длительность и easing

В библиотеке Muuri анимации играют ключевую роль в создании плавных и отзывчивых сеток элементов. Основной параметр, влияющий на скорость анимации, — это duration. Он определяет, сколько времени будет длиться переход от одного состояния сетки к другому, например, при перемещении элементов, фильтрации или сортировке.

const grid = new Muuri('.grid', {
  layoutDuration: 400, // длительность в миллисекундах
});
  • layoutDuration задаёт продолжительность анимации при изменении расположения элементов.
  • Значение указывается в миллисекундах, где 1000 мс = 1 секунда.
  • Меньшее значение делает анимацию резкой и быстрой, большее — плавной, медленной.

Важно учитывать, что слишком короткая длительность может визуально «разрывать» переходы, а слишком длинная — замедлять интерфейс, особенно на больших сетках с множеством элементов.

Easing: сглаживание движения

Параметр layoutEasing управляет кривой анимации, определяя, как изменяется скорость движения элементов во времени. В CSS это аналог функции transition-timing-function. Muuri поддерживает строки с CSS-подобными easing-функциями:

const grid = new Muuri('.grid', {
  layoutDuration: 500,
  layoutEasing: 'ease-in-out'
});

Популярные значения:

  • linear — движение равномерное, без ускорений и замедлений.
  • ease — стандартная кривая, плавное ускорение в начале и замедление в конце.
  • ease-in — плавное начало, ускорение к концу.
  • ease-out — резкое начало, замедление к концу.
  • ease-in-out — сочетание ускорения и замедления, максимально естественное движение.
  • Можно использовать кастомные cubic-bezier функции для точного контроля:
layoutEasing: 'cubic-bezier(0.25, 0.1, 0.25, 1)'

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

Комбинация длительности и easing

Эффект анимации определяется совместным использованием duration и easing. Например:

const grid = new Muuri('.grid', {
  layoutDuration: 700,
  layoutEasing: 'ease-in-out'
});
  • Большая длительность + ease-in-out создаёт ощущение «плавного скольжения» элементов.
  • Короткая длительность + linear подходит для быстрых интерфейсов, где важна скорость реакции.

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

Анимация при сортировке и фильтрации

Muuri позволяет задавать отдельные параметры анимации для сортировки и фильтрации через sortData и методы filter. Можно использовать собственные значения duration и easing:

grid.filter('.active', {
  layoutDuration: 600,
  layoutEasing: 'ease-out'
});
  • layoutDuration в данном методе переопределяет глобальное значение только для конкретного действия.
  • layoutEasing может отличаться от основной, что позволяет создавать динамические эффекты, например, резкое исчезновение элементов при фильтрации.

Динамическое изменение анимации

Muuri предоставляет методы для изменения duration и easing на лету, что удобно при интерактивных событиях:

grid.layout(true, {
  duration: 300,
  easing: 'ease-in'
});
  • Первый параметр true заставляет библиотеку пересчитать позиции элементов немедленно.
  • Второй параметр позволяет временно переопределить глобальные настройки для одного действия.

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

Рекомендации по настройке

  • Для небольших сеток с 10–20 элементами можно использовать короткую длительность (200–400 мс).
  • Для больших сеток (>50 элементов) оптимально 500–800 мс с ease-in-out или ease для плавности.
  • Слишком длинные анимации (более 1000 мс) могут раздражать пользователя и создавать ощущение «торможения».
  • Использовать кастомные cubic-bezier функции для сложных эффектов, например, когда элементы «отскакивают» или «замедляются» при приближении к цели.

Настройка duration и easing позволяет Muuri не просто перемещать элементы, а создавать живые, отзывчивые сетки с приятной визуальной динамикой.

Оглавление