SwapAnimation

SwapAnimation — это модуль в библиотеке Shopify Draggable, предназначенный для плавной анимации элементов при их перестановке. Он реализует визуальный эффект «обмена местами» элементов списка, обеспечивая естественное и интуитивное восприятие интерфейса. Модуль особенно полезен для sortable-списков, сеток и карточек продуктов.

Основные принципы работы

SwapAnimation работает на основе отслеживания начальных и конечных позиций элементов при событии drag:start и последующей анимации их перемещения до новых координат.

  • Начальная позиция определяется до начала перетаскивания.
  • Конечная позиция вычисляется после изменения порядка элементов в DOM.
  • Перемещение элементов осуществляется с помощью CSS трансформаций (transform: translate3d) для обеспечения высокой производительности.

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

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

SwapAnimation подключается как плагин к основному объекту Draggable:

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

const container = document.querySelector('.draggable-container');

const draggable = new Draggable(container, {
  draggable: '.draggable-item',
  delay: 0,
  mirror: {
    constrainDimensions: true
  }
});

draggable.addPlugin(SwapAnimation, {
  duration: 300,
  easing: 'ease-in-out'
});

Параметры плагина:

  • duration — время анимации в миллисекундах (по умолчанию 250).
  • easing — функция сглаживания движения (по умолчанию ease).
  • horizontal и vertical — можно явно указать направление анимации.
  • collapse — позволяет сжимать элементы, чтобы предотвратить визуальные пересечения.

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

SwapAnimation позволяет тонко настраивать визуальные эффекты:

  1. Длительность и плавность движения
draggable.addPlugin(SwapAnimation, {
  duration: 500,
  easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
});
  1. Смещение и направления

Можно ограничивать анимацию только горизонтальной или вертикальной осью:

draggable.addPlugin(SwapAnimation, {
  horizontal: true,
  vertical: false
});
  1. Сжатие элементов

При использовании параметра collapse: true соседние элементы плавно смещаются, освобождая место для перетаскиваемого элемента:

draggable.addPlugin(SwapAnimation, {
  collapse: true
});

События и интеграция с Draggable

SwapAnimation тесно интегрирован с жизненным циклом Draggable и реагирует на следующие события:

  • sortable:start — фиксирование исходных координат элементов.
  • sortable:swap — инициирование анимации перестановки при изменении порядка.
  • sortable:stop — завершение анимации и очистка временных стилей.

Пример подписки на события:

draggable.on('sortable:swap', (event) => {
  console.log('Произошла перестановка элементов', event);
});

Внутренние механизмы

SwapAnimation использует requestAnimationFrame для выполнения анимации без блокировки основного потока. Это обеспечивает:

  • Плавность движения независимо от количества элементов.
  • Минимальное влияние на производительность при сложных сетках.
  • Возможность синхронизации с другими эффектами Draggable, такими как Mirror или Plugins.

Каждый элемент получает временное смещение через CSS переменные или инлайн стиль:

transform: translate3d(x, y, 0);
transition: transform 300ms ease-in-out;

После завершения анимации эти стили удаляются, возвращая DOM в чистое состояние.

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

  1. Списки продуктов
const productList = new Draggable('.product-list', {
  draggable: '.product-item'
});

productList.addPlugin(SwapAnimation, { duration: 350, easing: 'ease' });
  1. Карточки в сетке
const grid = new Draggable('.grid', {
  draggable: '.grid-item'
});

grid.addPlugin(SwapAnimation, {
  duration: 400,
  collapse: true
});
  1. Вертикальные меню
const menu = new Draggable('.menu', {
  draggable: '.menu-item'
});

menu.addPlugin(SwapAnimation, {
  vertical: true,
  horizontal: false,
  duration: 250
});

Советы по оптимизации

  • Всегда указывать will-change: transform для элементов, чтобы ускорить анимацию на уровне GPU.
  • Для больших списков рекомендуется уменьшить длительность анимации (duration), чтобы не перегружать браузер.
  • Использовать параметр collapse только при необходимости, так как он требует пересчета позиций всех соседних элементов.
  • Комбинировать SwapAnimation с Mirror для создания интерактивного drag-and-drop с визуальной обратной связью.

Особенности взаимодействия с другими плагинами

  • Mirror — создаёт визуальную копию перетаскиваемого элемента; SwapAnimation анимирует только реальные элементы списка.
  • Plugins — любые плагины, изменяющие DOM во время drag, должны корректно взаимодействовать с SwapAnimation, чтобы не ломать расчёт позиций.
  • Sortable — SwapAnimation оптимизирован именно для sortable-списков и автоматически учитывает их перестановки.

SwapAnimation в Shopify Draggable обеспечивает высокоэффективную и наглядную анимацию при перестановке элементов, делая пользовательский интерфейс интуитивно понятным и визуально привлекательным. Правильная настройка параметров duration, easing и collapse позволяет адаптировать эффект под любые списки, сетки и меню.

Оглавление