Framer Motion集群8 分鐘閱讀·ExodeUI 團隊
掌握 Framer Motion 和 ExodeUI 中的彈簧物理
Framer Motion 中彈簧物理的完整指南。掌握剛度、阻尼、品質和restDelta，並使用 ExodeUI 探索視覺創作。
直接總結與定義
核心要點
Framer Motion 中的彈簧物理特性以物理模擬取代了基於時間的緩動曲線。彈簧受剛度（張力）、阻尼（摩擦）和質量的控制，根據距離和輸入速度自動計算持續時間，確保互動不會感到突然或遲緩。
Framer Motion彈簧的三個參數
在 Framer Motion 中，transition: { 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>
);