Параметры демпфирования

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

В основе лежит классическая модель гармонического осциллятора с затуханием, где движение определяется тремя ключевыми параметрами: жёсткость (stiffness), масса (mass) и демпфирование (damping). Именно параметр damping отвечает за силу сопротивления движению.

Физический смысл демпфирования

Демпфирование моделирует силы трения или сопротивления среды. Чем выше значение damping, тем быстрее система теряет энергию и тем быстрее прекращаются колебания.

Основные режимы поведения системы:

  • Недодемпфированная система (underdamped) Значение damping недостаточно велико. Возникают затухающие колебания вокруг целевого значения.

  • Критически демпфированная система (critically damped) Минимальное значение демпфирования, при котором система достигает цели максимально быстро без колебаний.

  • Передемпфированная система (overdamped) Слишком высокое значение damping. Движение становится медленным и «вязким», без колебаний.

Использование параметра damping в Popmotion

В Popmotion параметр damping используется в анимации типа spring:

import { spring } from "popmotion";

spring({
  from: 0,
  to: 100,
  stiffness: 200,
  damping: 10,
  mass: 1
}).start(v => console.log(v));

Здесь:

  • stiffness — сила пружины
  • damping — коэффициент демпфирования
  • mass — масса объекта

Влияние значения damping

Низкое значение damping

damping: 5

  • Долгие колебания

  • Выраженный «пружинящий» эффект

  • Подходит для:

    • bounce-анимаций
    • интерфейсов с «живой» физикой

Среднее значение damping

damping: 15
  • Быстрое затухание
  • Небольшие колебания
  • Универсальный вариант для UI

Высокое значение damping

damping: 50
  • Почти отсутствуют колебания
  • Медленное приближение к цели
  • Эффект «тяжёлого» движения

Взаимодействие с другими параметрами

Демпфирование нельзя рассматривать изолированно. Оно работает в связке с другими параметрами.

Связка с stiffness

  • Высокий stiffness + низкий damping → резкие и пружинистые колебания
  • Высокий stiffness + высокий damping → быстрое, но контролируемое движение

Связка с mass

  • Большая mass требует большего damping, иначе колебания будут слишком сильными
  • Маленькая mass с высоким damping создаёт эффект мгновенной остановки

Пример:

spring({
  from: 0,
  to: 100,
  stiffness: 150,
  damping: 20,
  mass: 2
});

Здесь увеличенная масса компенсируется более высоким демпфированием.

Критическое демпфирование

Критическое демпфирование — важное понятие при построении интерфейсов. Оно обеспечивает максимально быстрое достижение цели без визуальных колебаний.

В Popmotion нет явного параметра «critical damping», но его можно приблизительно вычислить:

Формула:

damping ≈ 2 * √(stiffness * mass)

Пример:

const stiffness = 100;
const mass = 1;
const damping = 2 * Math.sqrt(stiffness * mass);

spring({
  from: 0,
  to: 100,
  stiffness,
  damping,
  mass
});

Такой подход используется для создания «чистых» и предсказуемых анимаций.

Практические паттерны

1. Интерфейсные элементы

Для кнопок, модальных окон и панелей:

{
  stiffness: 200,
  damping: 20,
  mass: 1
}
  • Быстрое появление
  • Лёгкий «отскок»

2. Drag & Drop

Для перетаскиваемых элементов:

{
  stiffness: 300,
  damping: 30,
  mass: 0.8
}
  • Чёткое возвращение в позицию
  • Контролируемое движение

3. Реалистичная физика

{
  stiffness: 100,
  damping: 8,
  mass: 2
}
  • Длительное затухание
  • Натуральные колебания

Динамическое изменение демпфирования

В сложных сценариях damping может изменяться во время анимации. Это позволяет моделировать, например, изменение среды (воздух → вода).

Пример:

let damping = 10;

const animation = spring({
  from: 0,
  to: 100,
  stiffness: 150,
  damping
}).start(v => {
  if (v > 50) {
    damping = 30;
  }
});

Влияние на производительность

Параметр damping влияет не только на визуальное поведение, но и на длительность анимации:

  • Низкое демпфирование → больше кадров → выше нагрузка
  • Высокое демпфирование → быстрее завершение

При оптимизации интерфейсов предпочтительно избегать слишком «долгих» колебаний.

Частые ошибки

1. Слишком низкое демпфирование

damping: 1
  • Анимация выглядит «дёрганой»
  • Долго не стабилизируется

2. Слишком высокое демпфирование

damping: 100
  • Потеря динамики
  • «Мёртвое» движение

3. Игнорирование mass

Баланс между mass и damping критичен. Изменение одного параметра без учёта другого приводит к непредсказуемым результатам.

Сравнение с CSS-анимациями

В CSS нет прямого аналога демпфирования. Кривые cubic-bezier лишь имитируют поведение, но не моделируют физику:

  • Popmotion: физическая модель → реалистичность
  • CSS: математическая интерполяция → предсказуемость

Демпфирование даёт возможность создавать естественные взаимодействия, которые сложно воспроизвести стандартными средствами CSS.

Вывод форм поведения через комбинации параметров

Эффект stiffness damping mass
Прыгающий мяч 300 5 1
Плавное появление 150 20 1
Тяжёлый объект 100 25 3
Мгновенная остановка 200 40 1

Роль демпфирования в UX

Демпфирование напрямую влияет на восприятие интерфейса:

  • Низкое → игривость, эмоциональность
  • Среднее → баланс
  • Высокое → строгость, серьёзность

Корректный выбор параметра позволяет передать характер продукта через движение.

Оглавление