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

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

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

В Interact.js инерция настраивается через объект inertia, передаваемый при инициализации draggable, gesturable или resizable. Основные свойства:

  • enabled (boolean) — включает или отключает инерцию.

    inertia: { enabled: true }

    Если значение false, объект мгновенно останавливается после отпускания мыши или пальца.

  • resistance (number) — коэффициент сопротивления, влияющий на скорость замедления объекта.

    • Значение больше 1 увеличивает сопротивление (объект быстрее останавливается).
    • Значение меньше 1 уменьшает сопротивление (объект скользит дольше).
    inertia: { resistance: 8 }

  • minSpeed (number, px/s) — минимальная скорость, при которой инерция всё ещё применяется. Объект с меньшей скоростью мгновенно останавливается без скольжения.

    inertia: { minSpeed: 100 }

  • endSpeed (number, px/s) — скорость, с которой инерция считается завершённой. Позволяет контролировать, насколько плавно объект замедляется к полной остановке.

    inertia: { endSpeed: 10 }

  • allowResume (boolean) — определяет, может ли объект продолжить движение при повторном захвате во время инерции.

    inertia: { allowResume: true }

Примеры применения

Перетаскивание с инерцией

interact('.draggable')
  .draggable({
    inertia: {
      enabled: true,
      resistance: 10,
      minSpeed: 200,
      endSpeed: 20
    },
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    listeners: {
      move(event) {
        const { target, dx, dy } = event;
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + dx;
        const y = (parseFloat(target.getAttribute('data-y')) || 0) + dy;

        target.style.transform = `translate(${x}px, ${y}px)`;
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
      }
    }
  });

В этом примере объект продолжает движение после отпускания мыши, постепенно замедляясь в соответствии с resistance, minSpeed и endSpeed.

Масштабирование с инерцией

Для элементов, которые поддерживают gestures, инерция может применяться к масштабированию:

interact('.scalable')
  .gesturable({
    inertia: {
      enabled: true,
      resistance: 8,
      minSpeed: 0.05,
      endSpeed: 0.01
    },
    listeners: {
      move(event) {
        const scale = (parseFloat(event.target.getAttribute('data-scale')) || 1) * (1 + event.ds);
        event.target.style.transform = `scale(${scale})`;
        event.target.setAttribute('data-scale', scale);
      }
    }
  });

Здесь ds — относительное изменение масштаба между кадрами жеста, а инерция обеспечивает плавное завершение масштабирования, если жест выполнен быстро.

Настройка инерции для разных устройств

  • Мобильные устройства: обычно требуется меньше сопротивления (resistance: 5–8) для более «плавного» скольжения пальцем.
  • Десктоп: можно увеличить resistance (10–20) для более контролируемого эффекта при использовании мыши.
  • Минимальная скорость (minSpeed) должна подбираться с учётом размера и массы объекта: тяжелые объекты останавливаются быстрее, легкие — скользят дольше.

Комбинирование с модификаторами

Interact.js позволяет комбинировать инерцию с модификаторами, такими как:

  • restrictRect — ограничение движения внутри контейнера.
  • snap — притягивание к сетке или координатам.

Пример: объект скользит по инерции, но останавливается на границе контейнера:

interact('.draggable')
  .draggable({
    inertia: { enabled: true, resistance: 12 },
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ]
  });

endOnly: true гарантирует, что ограничения применяются только в конце инерции, а не на каждом кадре.

Важные рекомендации

  1. Настройка resistance и minSpeed — ключ к естественной физике. Малые значения делают объект «слишком легким», большие — «тяжелым».
  2. allowResume полезно для динамических интерфейсов, где объекты могут быть захвачены повторно во время скольжения.
  3. Сочетание с трансформациями CSS (translate, scale, rotate) позволяет создавать реалистичные эффекты инерции.
  4. Тестирование на разных устройствах критично: та же настройка может ощущаться по-разному на мобильных и десктопных платформах.

Понимание и точная настройка параметров инерции в Interact.js позволяет создавать интерфейсы с естественным и отзывчивым поведением объектов, повышая интерактивность и комфорт взаимодействия.

Оглавление