В системах физически основанной анимации поведение движения объекта описывается через начальные условия (позиция, скорость) и силы, действующие на него во времени. В библиотеке Popmotion одним из ключевых параметров, определяющих затухание движения, выступает коэффициент трения.
Трение в контексте анимации не является прямой копией физического трения из классической механики, а представляет собой численный коэффициент демпфирования, уменьшающий скорость объекта на каждом шаге симуляции. Его задача — обеспечить естественное замедление движения без резких остановок и визуальных артефактов.
В дискретной модели анимации скорость объекта обновляется на каждом кадре:
vₜ₊₁ = vₜ · (1 − f)
где:
При этом позиция изменяется как:
xₜ₊₁ = xₜ + vₜ
Таким образом, трение выступает как экспоненциальный затухающий множитель, постепенно уменьшающий вклад скорости в движение.
v_{t+1} = v_t (1 - f)
x_{t+1} = x_t + v_t
При итеративном применении это приводит к экспоненциальному затуханию скорости:
v_t = v_0 (1 - f)^t
В модуле physics библиотеки Popmotion коэффициент трения отвечает за:
Фактически трение определяет, насколько быстро система теряет энергию.
При f = 0 движение не затухает:
Такое поведение используется редко, поскольку нарушает естественность анимации.
При малых значениях (0.01–0.05):
Это используется для имитации скольжения или “масляной” инерции интерфейса.
При значениях около 0.1–0.2:
При значениях выше 0.3:
Используется для интерфейсных элементов, требующих точного позиционирования.
Внутренне физическая модель задаётся через конфигурацию:
import { physics } from '@popmotion/popmotion'
physics({
from: 0,
velocity: 500,
friction: 0.15
})Здесь friction контролирует, насколько быстро убывает velocity.
Каждый тик симуляции обновление состояния происходит приблизительно следующим образом:
velocity = velocity * (1 - friction)
x = x + velocity * deltaTimeТрение выполняет не только эстетическую функцию, но и стабилизационную:
Без демпфирования система могла бы входить в бесконечные колебания при наличии других сил.
В Popmotion используется дополнительный механизм остановки анимации:
Даже при наличии трения, система считается завершённой, когда:
Это предотвращает бесконечно долгие затухающие движения при малых значениях friction.
Трение в дискретной системе не линейно, а экспоненциально. Это означает, что:
Такое поведение визуально воспринимается как естественное замедление объектов в реальном мире.
В физической модели Popmotion трение редко используется изолированно.
Чем выше initial velocity, тем дольше сохраняется движение при одинаковом коэффициенте трения.
Хотя масса напрямую не всегда используется в physics-модуле, её аналогом выступает инерционная устойчивость системы.
В комбинации со spring-движением трение влияет на:
При выборе значения учитывается поведение интерфейса:
Корректная настройка позволяет добиться согласованности анимаций в рамках одного интерфейса без визуальных разрывов поведения.