Движение с трением основано на затухании скорости со временем. В отличие от пружинной модели, где присутствует стремление к целевой точке, трение моделирует инерцию и сопротивление среды, постепенно уменьшающее скорость объекта до полной остановки.
В Popmotion трение используется для создания инерционных анимаций: скролл с «докручиванием», плавное затухание свайпов, реалистичное замедление UI-элементов после жестов.
Физическая основа поведения выражается через дискретное уменьшение скорости на каждом шаге времени:
v_{t+1} = v_t (1 - r)
где коэффициент сопротивления определяет интенсивность потери энергии системой. Чем выше значение, тем быстрее происходит остановка.
В более реалистичной модели используется экспоненциальное затухание:
genui{“math_block_widget_always_prefetch_v2”:{“content”:“v(t) = v_0 e^{-kt}”}}
Такая форма описывает поведение объектов в среде с постоянным сопротивлением.
В Popmotion трение реализуется как функция анимации, работающая от начальной скорости без привязки к целевой точке. Основные параметры обычно включают:
from)velocity)power или аналогичный
параметр)restSpeed)Движение продолжается до тех пор, пока скорость не станет ниже порогового значения.
Типичный вызов строится вокруг генерации анимационного объекта:
import { animate, friction } from "popmotion";
const animation = friction({
from: 0,
velocity: 800,
power: 0.8,
restSpeed: 10
});
animate({
...animation,
onUpdate: (v) => {
element.style.transform = `translateX(${v}px)`;
}
});Каждый кадр пересчитывает положение на основе текущей скорости, которая постепенно уменьшается.
Ключевым процессом является уменьшение скорости на каждом временном шаге. В дискретной модели:
v_{t+1} = v_t - k v_t
или эквивалентно:
v_{t+1} = v_t (1 - k)
где коэффициент k отражает силу трения среды.
Такой подход позволяет добиться естественного поведения: быстрое движение на старте и плавное торможение в конце.
В Popmotion используются две фундаментальные физические модели: пружина и трение.
Spring-модель:
Friction-модель:
Сравнение поведения:
F_{spring} = -kx - cv
F_{friction} = -cv
В случае трения отсутствует восстановительная сила, остаётся только сопротивление движению.
Ключевой параметр friction-анимации — коэффициент силы сопротивления. Он определяет, насколько быстро энергия системы будет рассеиваться.
Математически влияние параметра можно интерпретировать как масштабирование коэффициента затухания:
v(t+1) = v_t e^{-k p}}
где p — параметр управления силой трения.
Любая инерционная система требует критерия завершения анимации. В friction-модели используется порог минимальной скорости.
Условие остановки:
|v| < v_{min}
Если модуль скорости падает ниже этого значения, анимация считается завершённой.
Это предотвращает бесконечно малые движения, которые невозможно визуально различить, но которые могут продолжать вычисляться.
Позиция обновляется через интегрирование скорости по времени:
x_{t+1} = x_t + v_t t
В каждом кадре значение скорости пересчитывается, после чего применяется к координате объекта. Это создаёт непрерывное движение без необходимости задания ключевых точек.
Friction-анимация особенно эффективна для имитации UI-жестов:
При увеличении начальной скорости поведение становится более «энергичным», при уменьшении — более контролируемым.
Плавность достигается за счёт непрерывного пересчёта состояния системы в зависимости от текущей скорости.
Внутренне анимация работает через шаги времени Δt:
t_{n+1} = t_n + t
На каждом шаге выполняются две операции:
Такой цикл повторяется до выполнения условия остановки.
Хотя математическая модель может быть линейной или экспоненциальной, восприятие движения человеком нелинейно. Поэтому friction часто комбинируется с дополнительными кривыми ускорения и сглаживания.
Эффект достигается изменением коэффициента сопротивления в зависимости от скорости:
k(v) = k_0 + |v|
При высоких скоростях система ведёт себя более инертно, при низких — быстрее останавливается.
В конце движения система входит в режим доминирования сопротивления над инерцией. Уравнение движения упрощается до чистого затухания:
= -kv
Это состояние обеспечивает плавное завершение анимации без резких скачков координат.
Friction-модель формирует основу для обработки пользовательских взаимодействий. После завершения жеста начальная скорость вычисляется из последних кадров движения, после чего передаётся в систему трения.
Далее поведение полностью определяется физической моделью, а не логикой интерфейса, что позволяет добиться естественного ощущения «инерции» без ручного управления каждым кадром.