Начальная скорость

В Popmotion движение строится на физически ориентированных моделях, где анимация рассматривается как результат взаимодействия начального положения, целевой точки, силы сопротивления и начальной скорости. Именно начальная скорость задаёт инерционный “импульс” объекта в момент старта или завершения взаимодействия, особенно в сценариях drag-and-drop, жестов и кинематических переходов.

Физический смысл начальной скорости

Начальная скорость (velocity, v₀) определяет, с какой скоростью объект уже движется в момент запуска анимации.

Формально:

  • v₀ — скорость в момент времени t = 0

  • единицы измерения зависят от анимируемого параметра:

    • px/s — для координат
    • deg/s — для углов
    • unit/s — для абстрактных значений

В контексте Popmotion начальная скорость используется как входной параметр физического симулятора, который продолжает движение без резких скачков.

Роль начальной скорости в физической анимации

Popmotion не “перескакивает” к целевому состоянию, а моделирует движение:

  • инерция сохраняет движение после взаимодействия
  • замедление происходит за счёт трения или демпфирования
  • пружинные системы учитывают импульс

Начальная скорость влияет на:

  • дальность “докатывания” объекта
  • длительность анимации
  • характер затухания движения
  • реалистичность взаимодействий

Использование в spring

В пружинной модели начальная скорость влияет на первый импульс системы.

import { spring } from "popmotion";

spring({
  from: 0,
  to: 300,
  velocity: 800,
  stiffness: 200,
  damping: 20
}).start(v => {
  console.log(v);
});

Поведение параметра velocity

  • высокая скорость → сильный “перелёт” через целевую точку
  • низкая скорость → плавное движение без колебаний
  • нулевая скорость → классическое движение из состояния покоя

Пружинная модель интерпретирует скорость как энергию системы в начальный момент.

Использование в decay

Модель затухания полностью опирается на начальную скорость как на единственный драйвер движения.

import { decay } from "popmotion";

decay({
  from: 0,
  velocity: 1200
}).start(v => {
  console.log(v);
});

Особенности decay

  • отсутствует целевая точка
  • движение продолжается пока скорость > 0
  • замедление определяется коэффициентом трения

Начальная скорость здесь задаёт всю “длину пути”.

Использование в inertia

inertia объединяет физику инерции и сопротивления среды.

import { inertia } from "popmotion";

inertia({
  velocity: 600,
  min: 0,
  max: 1000,
  power: 0.8,
  timeConstant: 350
}).start(v => {
  console.log(v);
});

Роль velocity в inertia

  • определяет стартовый импульс движения
  • влияет на скорость затухания
  • участвует в расчёте предсказуемой траектории

При работе с drag-событиями именно сюда передаётся вычисленная скорость отпускания.

Получение начальной скорости из взаимодействий

В реальных интерфейсах velocity редко задаётся вручную. Чаще он вычисляется на основе пользовательского ввода.

Типичный сценарий:

  • отслеживание позиции pointer/touch
  • вычисление разницы позиций за время
  • преобразование в px/s

Пример расчёта:

let previous = { x: 0, t: 0 };

function onMove(x, t) {
  const dt = t - previous.t;

  const velocity = (x - previous.x) / dt;

  previous = { x, t };

  return velocity * 1000;
}

Передача скорости из drag-системы

Popmotion часто используется совместно с pointer и drag.

import { pointer, inertia } from "popmotion";

let latest = 0;

pointer({
  onMove: v => {
    latest = v.x;
  },
  onEnd: v => {
    inertia({
      from: v.x,
      velocity: v.velocity.x
    }).start(console.log);
  }
});

Здесь:

  • v.velocity.x уже содержит вычисленную начальную скорость
  • движение продолжается без резкого обрыва
  • сохраняется физическая непрерывность

Влияние начальной скорости на траекторию

Начальная скорость определяет форму движения:

Низкая скорость

  • короткая траектория
  • быстрое затухание
  • минимальная инерция

Средняя скорость

  • стабильное плавное движение
  • предсказуемое замедление
  • подходит для UI-переходов

Высокая скорость

  • длинный “пролёт”
  • возможные overshoot-эффекты в spring
  • выраженная инерция в decay

Комбинация velocity с damping и friction

Начальная скорость не существует изолированно. Она взаимодействует с параметрами среды:

  • damping в spring определяет, насколько быстро гасится энергия
  • friction в inertia влияет на замедление
  • power в decay масштабирует влияние скорости

Пример:

spring({
  from: 0,
  to: 500,
  velocity: 1000,
  damping: 30
});

При одинаковой скорости изменение демпфирования радикально меняет поведение системы.

Ошибки при работе с начальной скоростью

Игнорирование единиц измерения

Скорость без привязки к времени приводит к нестабильному поведению:

  • px/ms вместо px/s
  • отсутствие нормализации времени

Слишком высокая скорость без ограничения

  • выход за пределы интерфейса
  • неконтролируемые значения в inertia

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

  • отсутствие движения
  • “мертвые” анимации без эффекта продолжения

Нормализация скорости

Для стабильного поведения скорость приводится к единому масштабу:

  • px/s для координат
  • deg/s для углов
  • normalized units для абстрактных значений

Часто применяется ограничение:

const clampVelocity = v =>
  Math.max(-2000, Math.min(2000, v));

Связь начальной скорости и UX-поведения

Начальная скорость формирует ощущение “массы” интерфейса:

  • высокая инерция → тяжёлые, “физические” объекты
  • низкая инерция → цифровая, резкая реакция
  • сбалансированная скорость → предсказуемое поведение UI

В интерфейсах с жестами именно velocity создаёт иллюзию непрерывности движения между касанием и анимацией.

Использование velocity в кастомных моделях

Popmotion позволяет строить собственные физические системы, где начальная скорость входит в дифференциальные уравнения движения:

function customPhysics(v0, t) {
  const friction = 0.95;

  return v0 * Math.pow(friction, t);
}

Здесь:

  • v0 задаёт старт
  • дальнейшее движение зависит от коэффициента затухания
  • модель полностью управляется скоростью старта
Оглавление