Кластер Framer Motion8 минут чтения·Команда ExodeUI
Освоение весенней физики в Framer Motion и ExodeUI
Полное руководство по физике пружин в Framer Motion. Освойте жесткость, демпфирование, массу и дельту покоя, а также откройте для себя визуальную разработку с помощью ExodeUI.
Кратко и определение
Главное
Физика пружин в Framer Motion заменяет кривые замедления, основанные на времени, физическим моделированием. Пружины, управляемые жесткостью (натяжением), демпфированием (трением) и массой, автоматически рассчитывают продолжительность на основе расстояния и входной скорости, гарантируя, что взаимодействие никогда не будет резким или вялым.
Три параметра пружин Framer Motion
В Framer Motion переход: { type: "spring" } принимает три основных физических параметра:
- жесткость: более высокие значения (например, 500) быстро привязываются к цели; более низкие значения (например, 150) плавно скользят.
- демпфирование: контролирует отскок. Демпфирование ниже 20 вызывает заметное подпрыгивание; демпфирование около 28 создает чистую, профессиональную посадку.
- масса: умножает импульс и расстояние замедления. По умолчанию — 1,0.
Пример реализации для продакшена
Реализация интерактивного компонента
// Framer Motion Spring Transition
import { motion } from 'framer-motion';
export const SnappyModal = () => (
<motion.div
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{
type: 'spring',
stiffness: 420,
damping: 26,
mass: 0.9
}}
className="modal-box p-8 rounded-2xl bg-zinc-900 text-white"
>
Physics-Driven Modal
</motion.div>
);