基於物理的運動8 分鐘閱讀·ExodeUI 團隊
Spring 動畫：自然 UI 運動的物理原理
了解 Spring 動畫在 UI 設計中的工作原理。了解剛度、阻尼、質量和速度。為 React 和 SwiftUI 建立基於自然物理的動畫。
直接總結與定義
核心要點
彈簧動畫使用質量-彈簧-阻尼器系統的物理行為對 UI 運動進行建模，其中組件的運動由剛度（其拉向靜止的強度）、阻尼（其失去能量的速度）和質量（其承載的慣性大小）控制。與基於持續時間的動畫不同，彈簧會自動響應用戶速度，並且可以在任何點中斷，而不會導致視覺不連續。
為什麼彈簧感覺比持續時間曲線更自然
物理世界沒有「ease-in-out」或「cubic-bezier(0.4, 0, 0.2, 1)」之類的概念。物理物體因力而加速，因摩擦而減速。當抽屜滑開時，它有動力；當您釋放它時，摩擦力會使它靜止。 Spring 物理學在軟體中複製了這種物理現實，這就是為什麼 iOS UIKit、Android Motion Compose 和 ExodeUI 都是 Spring 優先的動畫系統。
彈簧參數解釋
了解每個參數可以讓您準確地設計出您想要的物理感覺。
剛度（張力）
彈簧拉向其靜止值的強度有多大。高剛度 (600+) 創建快速、響應靈敏的 UI，如按鈕按下回饋。低剛度 (100–200) 可創造緩慢、浮動的運動，適合頁面過渡或環境浮動元素。
阻尼（摩擦）
彈簧每個週期損失多少能量。在臨界阻尼下，彈簧達到靜止狀態而不會振盪。欠阻尼彈簧（低摩擦）會超調並彈跳。阻尼比 / (2 × sqrt(剛度 × 質量)) 決定是否欠阻尼、臨界阻尼或過阻尼。
大量的
動畫元素具有多少慣性。質量越大，繪畫感覺越重，並且需要更長的時間來改變方向。大多數 UI 動畫將品質保持在 1.0，並透過剛度和阻尼控制感覺。
初始速度
如果使用者滑動或甩動某個元素，則可以使用該手勢速度來初始化彈簧，從而在手勢和彈簧沉降之間創建無縫連續性。
UI 元件的實用 Spring 預設
這些預設涵蓋了最常見的 UI 互動模式。
- 按鈕點擊：剛度 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>
);
}