Инерция для разных типов взаимодействий

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

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

Инерция активируется при помощи объекта inertia в методе конфигурации:

interact('.draggable')
  .draggable({
    inertia: {
      resistance: 10,       // Коэффициент сопротивления (px/s²)
      minSpeed: 100,        // Минимальная скорость для начала инерции (px/s)
      endSpeed: 10,         // Скорость, при которой движение останавливается (px/s)
      allowResume: true     // Разрешает возобновление инерции после прерывания
    },
    modifiers: [],
    listeners: { move: dragMoveListener }
  });

Пояснение параметров:

  • resistance — сопротивление, замедляющее объект. Чем выше значение, тем быстрее объект остановится.
  • minSpeed — минимальная скорость для запуска инерции. Движение ниже этого порога не запускает эффект.
  • endSpeed — скорость, при которой объект останавливается. Позволяет задать плавное замедление.
  • allowResume — если true, объект может продолжить движение после прерывания жеста (например, если пользователь снова схватил объект).

Инерция для drag

Для перетаскивания (drag) инерция позволяет объекту «скользить» после отпускания. Важные особенности:

  1. Расчет направления и скорости Interact.js использует вектор скорости движения в момент отпускания элемента, чтобы определить направление и длину инерционного движения.

  2. Комбинация с модификаторами Если применяется snap, restrict или grid, инерция учитывает ограничения. Например, при snap объект будет замедляться к ближайшей точке сетки, создавая более естественное поведение.

interact('.draggable')
  .draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.snap({
        targets: [interact.snappers.grid({ x: 50, y: 50 })],
        range: Infinity
      })
    ],
    listeners: {
      move (event) {
        const target = event.target;
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

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

Инерция для resize

При изменении размеров элемента (resize) инерция позволяет сохранять скорость изменения размеров, создавая эффект «продолжения растяжения» после отпускания мыши. Основные моменты:

  • Направление и скорость рассчитываются отдельно по осям x и y.
  • Ограничения размеров через modifiers.restrictSize корректируют инерционное движение, предотвращая выход за пределы контейнера или минимальные/максимальные размеры.
interact('.resizable')
  .resizable({
    inertia: true,
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: 100, height: 50 },
        max: { width: 600, height: 400 }
      })
    ],
    listeners: {
      move (event) {
        let { x, y } = event.target.dataset;
        x = (parseFloat(x) || 0) + event.deltaRect.left;
        y = (parseFloat(y) || 0) + event.deltaRect.top;

        Object.assign(event.target.style, {
          width: `${event.rect.width}px`,
          height: `${event.rect.height}px`,
          transform: `translate(${x}px, ${y}px)`
        });

        event.target.dataset.x = x;
        event.target.dataset.y = y;
      }
    }
  });

Инерция для жестов (gesture)

Interact.js поддерживает инерцию для масштабирования и вращения с помощью событий gesture. При этом:

  • Скорость вращения и масштабирования вычисляется на основе последних изменений.
  • Ограничения через modifiers позволяют плавно завершать жест, не выходя за допустимые диапазоны.
interact('.gesturable')
  .gesturable({
    inertia: true,
    listeners: {
      move (event) {
        const target = event.target;
        const currentScale = parseFloat(target.getAttribute('data-scale')) || 1;
        const currentAngle = parseFloat(target.getAttribute('data-angle')) || 0;

        const newScale = currentScale * (1 + event.ds);
        const newAngle = currentAngle + event.da;

        target.style.transform = `scale(${newScale}) rotate(${newAngle}deg)`;
        target.setAttribute('data-scale', newScale);
        target.setAttribute('data-angle', newAngle);
      }
    }
  });

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

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

  • Модификаторы корректируют движение во время инерции, предотвращая пересечение запрещённых зон.
  • Параметр endOnly у модификаторов влияет на момент применения — только после завершения жеста или на протяжении всего движения.
  • Использование snap с инерцией позволяет создавать эффекты «притяжения к точкам», сохраняя естественное замедление.

Тонкая настройка инерции

Для каждого типа взаимодействия можно настроить инерцию отдельно, задавая значения resistance, minSpeed и endSpeed в соответствии с характером движения:

  • Drag: высокая resistance уменьшает эффект скольжения; низкая — создает ощущение лёгкости.
  • Resize: небольшая resistance делает растяжение более динамичным; высокая — стабилизирует размеры.
  • Gesture: параметры инерции позволяют сделать масштабирование и вращение более «текучими», с естественным замедлением.

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

Оглавление