Velocity - скорость движения

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

Получение и использование velocity

Interact.js автоматически вычисляет скорость движения элементов при drag событиях. Для доступа к значениям скорости используется объект события event в слушателях dragmove или dragend:

interact('.draggable')
  .draggable({
    listeners: {
      move (event) {
        const velocityX = event.dx / event.dt;
        const velocityY = event.dy / event.dt;
        console.log(`Скорость X: ${velocityX}, Y: ${velocityY}`);
      }
    }
  });
  • event.dx и event.dy — смещения по осям X и Y с момента предыдущего события.
  • event.dt — время между текущим и предыдущим событием в миллисекундах.
  • Вычисленная скорость используется для создания эффекта инерции, throw и других динамических взаимодействий.

Throw и инерция с velocity

Interact.js поддерживает модуль inertia, который позволяет элементам продолжать движение после отпускания мыши или пальца. Настройка параметров инерции напрямую зависит от velocity.

interact('.draggable')
  .draggable({
    inertia: {
      resistance: 10,      // Сопротивление замедления
      minSpeed: 100,       // Минимальная скорость для запуска инерции
      endSpeed: 10,        // Скорость, при которой движение останавливается
      allowResume: true    // Возможность возобновления движения после паузы
    }
  });
  • resistance определяет, насколько быстро объект замедляется.
  • minSpeed — порог, после которого начинается инерция.
  • endSpeed — скорость, при которой движение полностью останавливается.

Velocity в этом контексте не задаётся вручную, она вычисляется библиотекой на основе предыдущих перемещений.

Ограничение скорости движения

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

interact('.draggable')
  .draggable({
    listeners: {
      move(event) {
        const maxSpeed = 2; // пикселя/мс
        let velocityX = event.dx / event.dt;
        let velocityY = event.dy / event.dt;

        if (Math.abs(velocityX) > maxSpeed) {
          velocityX = maxSpeed * Math.sign(velocityX);
        }
        if (Math.abs(velocityY) > maxSpeed) {
          velocityY = maxSpeed * Math.sign(velocityY);
        }

        event.target.style.transform = `translate(${velocityX * event.dt}px, ${velocityY * event.dt}px)`;
      }
    }
  });

Таким образом можно контролировать динамику движения и предотвращать слишком резкие сдвиги при быстром перетаскивании.

Velocity при масштабировании и повороте

Velocity применяется не только к drag, но и к resize и gesturable событиям. Например, при изменении размеров можно отслеживать скорость изменения ширины и высоты:

interact('.resizable')
  .resizable({
    listeners: {
      move(event) {
        const velocityWidth = event.deltaRect.width / event.dt;
        const velocityHeight = event.deltaRect.height / event.dt;
        console.log(`Скорость изменения: W=${velocityWidth}, H=${velocityHeight}`);
      }
    }
  });

Для жестов (повороты, масштабирование пальцами) velocity используется для плавного завершения действия при отпускании пальцев:

interact('.gesturable')
  .gesturable({
    listeners: {
      move(event) {
        const rotationSpeed = event.da / event.dt; // градусы/мс
        const scaleSpeed = (event.ds - 1) / event.dt;
        console.log(`Rotation velocity: ${rotationSpeed}, Scale velocity: ${scaleSpeed}`);
      }
    }
  });

Влияние velocity на пользовательский опыт

Использование velocity позволяет реализовать следующие эффекты:

  • Плавные броски (throw), где объект продолжает движение после отпускания мыши или пальца.
  • Инертное скроллирование и движение элементов в интерфейсе.
  • Контроль резких движений, предотвращение “прыжков” элементов.
  • Физически реалистичные анимации, создающие ощущение натурального взаимодействия.

Velocity является фундаментальным инструментом для создания интерактивных интерфейсов с ощущением веса и динамики.

Практические рекомендации

  1. Всегда учитывать dt — время между событиями, чтобы корректно рассчитывать скорость.
  2. Использовать инерцию с ограничениями для предотвращения слишком длинных или быстрых бросков.
  3. Комбинировать velocity с ограничениями позиции (restrict), чтобы элементы не выходили за границы контейнера.
  4. Отслеживать velocity при multi-touch для корректной работы жестов, особенно поворота и масштабирования.

Velocity в Interact.js — это не просто число, а основной инструмент для создания естественных, отзывчивых и управляемых движений элементов интерфейса.

Оглавление