Пользовательские анимации

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

Настройка анимации элементов

Для управления анимациями в Muuri используется объект конфигурации при инициализации сетки:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  layout: {
    fillGaps: true,
    horizontal: false
  },
  layoutOnResize: true,
  layoutOnInit: true,
  dragSortPredicate: {
    action: 'move'
  },
  dragReleaseDuration: 400, // стандартное время анимации в миллисекундах
  dragReleaseEasing: 'ease', // стандартная кривая easing
});

Ключевые параметры для анимации:

  • dragReleaseDuration — время завершения анимации после отпускания элемента.
  • dragReleaseEasing — кривая анимации; принимает значения CSS (ease, linear, ease-in-out и др.).
  • showDuration и hideDuration — время анимации при показе и скрытии элементов.
  • showEasing и hideEasing — кривые анимации для появления и исчезновения.

Эти параметры обеспечивают базовую анимацию. Для более сложного поведения применяются пользовательские функции анимации.

Пользовательские функции анимации

Muuri позволяет переопределять встроенные анимации через события и методы on. Для кастомных анимаций чаще всего используют событие layoutEnd и метод animate каждого элемента.

Пример плавного увеличения элемента при перемещении:

grid.on('layoutEnd', () => {
  grid.getItems().forEach(item => {
    const element = item.getElement();
    element.style.transition = 'transform 600ms cubic-bezier(0.68, -0.55, 0.27, 1.55)';
    element.style.transform = 'scale(1.05)';
    
    setTimeout(() => {
      element.style.transform = 'scale(1)';
    }, 600);
  });
});

Здесь используется CSS-трансформация scale и кастомная кривая cubic-bezier для создания более выразительной анимации.

Анимации показа и скрытия элементов

Muuri поддерживает анимации при показе (show) и скрытии (hide) элементов. Для их кастомизации можно передать объект с функцией анимации:

item.show({
  duration: 500,
  easing: 'ease-out',
  onFinish: () => {
    console.log('Элемент появился');
  }
});

item.hide({
  duration: 300,
  easing: 'ease-in',
  onFinish: () => {
    console.log('Элемент скрыт');
  }
});

Особенности:

  • onFinish вызывается после завершения анимации.
  • Можно комбинировать трансформации (translate, scale, rotate) с изменением прозрачности (opacity) для создания эффектов затухания и движения.

Анимации при перетаскивании

Перетаскивание (drag) — одна из ключевых областей, где кастомные анимации делают интерфейс более интерактивным. Для изменения поведения перетаскивания используют следующие методы:

  • dragStart — событие начала перетаскивания.
  • dragMove — событие во время движения.
  • dragReleaseEnd — событие завершения перетаскивания.

Пример с плавным “подпрыгиванием” элемента после перетаскивания:

grid.on('dragReleaseEnd', (item) => {
  const element = item.getElement();
  element.style.transition = 'transform 400ms cubic-bezier(0.25, 1.25, 0.5, 1)';
  element.style.transform = 'translateY(-10px)';

  setTimeout(() => {
    element.style.transform = 'translateY(0)';
  }, 400);
});

Использование cubic-bezier позволяет задать индивидуальный эффект «пружины», делая сетку живой и отзывчивой.

Комбинирование нескольких анимаций

Для создания сложных эффектов элементы можно анимировать несколькими свойствами одновременно:

item.show({
  duration: 600,
  easing: 'ease-in-out',
  onBeforeStart: (element) => {
    element.style.opacity = '0';
    element.style.transform = 'scale(0.8) rotate(-15deg)';
  },
  onFinish: (element) => {
    element.style.opacity = '';
    element.style.transform = '';
  }
});

Здесь при показе элемента одновременно изменяются:

  • opacity — плавное появление;
  • scale — увеличение размера;
  • rotate — лёгкий поворот.

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

  • Использовать аппаратно ускоренные свойства (transform и opacity) вместо top/left для минимизации нагрузок на рендер.
  • Ограничивать количество одновременно анимируемых элементов в больших сетках.
  • Предварительно задавать начальные стили через CSS, чтобы избежать резких «перепрыгиваний» при первом рендере.

Итоговые возможности кастомизации

Muuri предоставляет полный контроль над:

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

Благодаря этому библиотека подходит для создания интерактивных интерфейсов с уникальной визуальной эстетикой и высокой отзывчивостью.

Оглавление