Spring Animation: физика естественного движения пользовательского интерфейса
Узнайте, как работает Spring анимация в дизайне пользовательского интерфейса. Понимать жесткость, демпфирование, массу и скорость. Создавайте естественные физические анимации для React и SwiftUI.
Главное
Spring анимация моделирует движение пользовательского интерфейса, используя физическое поведение системы масса-пружина-демпфер, где движение компонента определяется жесткостью (насколько сильно он тянется к состоянию покоя), демпфированием (насколько быстро он теряет энергию) и массой (насколько инерции он несет). В отличие от анимации, основанной на продолжительности, пружины автоматически реагируют на скорость пользователя и могут быть прерваны в любой момент, не вызывая визуальных нарушений.
Почему пружины кажутся более естественными, чем кривые продолжительности
В физическом мире нет таких понятий, как «легкость входа» или «кубическая кривая Безье (0,4, 0, 0,2, 1)». Физические объекты ускоряются под действием сил и замедляются из-за трения. Когда ящик выдвигается, он имеет импульс; когда вы отпускаете его, трение приводит его в состояние покоя. Физика Spring воспроизводит эту физическую реальность в программном обеспечении, поэтому iOS UIKit, Android Motion Compose и ExodeUI — это анимационные системы, ориентированные на Spring.
Объяснение параметров пружины
Понимание каждого параметра позволит вам создать именно то физическое ощущение, которое вы хотите.
Жесткость (Натяжение)
Насколько сильно пружина тянется к состоянию покоя. Высокая жесткость (600+) обеспечивает быстрый и отзывчивый пользовательский интерфейс, напоминающий обратную связь при нажатии кнопок. Низкая жесткость (100–200) создает медленное, плавное движение, подходящее для переходов страниц или окружающих плавающих элементов.
Демпфирование (трение)
Сколько энергии теряет пружина за цикл. При критическом демпфировании пружина достигает состояния покоя без колебаний. Пружины с недостаточным демпфированием (с низким коэффициентом трения) будут промахиваться и подпрыгивать. Отношение демпфирования / (2 × sqrt(жесткость × масса)) определяет, имеете ли вы недостаточное демпфирование, критическое демпфирование или избыточное демпфирование.
Масса
Насколько инерционен анимированный элемент. Более высокая масса делает анимацию более тяжелой и требует больше времени для изменения направления. Большинство анимаций пользовательского интерфейса сохраняют массу на уровне 1,0 и контролируют ощущения за счет жесткости и демпфирования.
Начальная скорость
Если пользователь проводит пальцем или бросает элемент, пружина может быть инициализирована с этой скоростью жеста, создавая плавную непрерывность между жестом и регулировкой пружины.
Практические настройки Spring для компонентов пользовательского интерфейса
Эти пресеты охватывают наиболее распространенные шаблоны взаимодействия пользовательского интерфейса.
- Нажатие кнопки: жесткость 500, демпфирование 30 — мгновенное, резкое, минимальный отскок.
- Расширение карты: жесткость 280, демпфирование 24, масса 1,2 — плавное, взвешенное расширение.
- Ящик/лист: жесткость 340, демпфирование 28 — решающий, с небольшой осадкой
- Уведомление о прыгучести: жесткость 400, демпфирование 18 — игривый перелет.
- Переход страницы: жесткость 220, демпфирование 22, масса 1,4 — кинематографический, взвешенный
Пример реализации для продакшена
// Spring presets in React with the Motion library (motion.dev).
// The same stiffness / damping / mass values can be saved as motion tokens.
import { motion } from 'motion/react';
const springs = {
snappy: { type: 'spring', stiffness: 500, damping: 30, mass: 1 },
smooth: { type: 'spring', stiffness: 280, damping: 24, mass: 1.2 },
bouncy: { type: 'spring', stiffness: 400, damping: 18, mass: 1 },
cinematic: { type: 'spring', stiffness: 220, damping: 22, mass: 1.4 },
};
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ y: open ? 0 : 24, scale: open ? 1 : 0.96 }}
transition={springs.smooth}
>
Smooth physics-based card reveal
</motion.div>
);
}