SortAnimation

SortAnimation — это плагин для библиотеки Shopify Draggable, который добавляет плавную анимацию при сортировке элементов внутри контейнера. Его основная задача — визуально подчеркнуть перемещение элементов, создавая эффект «скольжения» без резких прыжков.

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

Подключение SortAnimation

Чтобы использовать SortAnimation, нужно убедиться, что установлены Draggable и соответствующие плагины:

import { Draggable, Plugins } from '@shopify/draggable';

const container = document.querySelector('.list');

const draggable = new Draggable(container, {
  draggable: '.item',
  plugins: [Plugins.SortAnimation],
  sortAnimation: {
    duration: 300,
    easingFunction: 'ease-in-out'
  }
});

Ключевые параметры:

  • duration — длительность анимации в миллисекундах.
  • easingFunction — функция плавности анимации (например, ease, linear, ease-in-out).

Принцип работы анимации

SortAnimation работает за счет:

  1. Фиксации текущих координат элементов. Перед началом перетаскивания каждый элемент получает свои координаты в DOM.
  2. Отслеживания изменений позиции. При перемещении элемента плагин вычисляет разницу между новой позицией и исходной.
  3. Применения CSS-трансформаций. Разница по координатам используется для трансформаций translate3d, что позволяет анимировать движение элементов без перерисовки всего DOM.

Этот подход снижает нагрузку на браузер и обеспечивает плавное визуальное перемещение элементов.

Настройка анимации

Параметры sortAnimation можно настраивать через объект при инициализации:

plugins: [Plugins.SortAnimation],
sortAnimation: {
  duration: 400,
  easingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  containerClass: 'custom-animation-container'
}
  • containerClass — позволяет задавать CSS-класс контейнера для анимации.
  • duration и easingFunction можно менять динамически через методы Draggable.

События SortAnimation

SortAnimation интегрируется с событиями Draggable:

  • sortable:sort:start — начало сортировки элемента.
  • sortable:sort:move — элемент движется на новую позицию.
  • sortable:sort:stop — завершение сортировки.

Пример использования:

draggable.on('sortable:sort:move', (event) => {
  console.log('Элемент движется:', event.source);
});

События позволяют добавлять дополнительные эффекты, например, подсветку элементов, изменение прозрачности или масштабирование при перемещении.

Советы по производительности

  1. Использовать translate3d вместо top/left. Это позволяет GPU-ускорение и плавную анимацию.
  2. Ограничивать количество одновременно анимируемых элементов. Если элементов слишком много, браузер может тормозить.
  3. Использовать минимальные длительности анимации для динамических списков. Слишком длинная анимация замедляет интерактивность.

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

const draggable = new Draggable(document.querySelectorAll('.grid'), {
  draggable: '.card',
  plugins: [Plugins.SortAnimation],
  sortAnimation: {
    duration: 250,
    easingFunction: 'ease-out',
    containerClass: 'grid-animation'
  }
});

draggable.on('sortable:sort:stop', (event) => {
  console.log('Элемент перемещен на новую позицию');
});

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

Взаимодействие с другими плагинами Draggable

SortAnimation хорошо комбинируется с:

  • SwapAnimation — анимация обмена элементов.
  • Mirror — создание «зеркала» перемещаемого элемента для более наглядного перетаскивания.

Важно: SortAnimation должен быть подключен после Mirror, чтобы анимация правильно учитывала копию перемещаемого элемента.

Оглавление