三次貝塞爾曲線緩動描述了數值如何在固定時間內從開始移動到結束,例如 300 毫秒的緩出時間。它是可預測的並且在任何地方都受支持,包括普通的 CSS。
相反,彈簧描述的是物理系統。您可以設定剛度、阻尼和質量,該值會像彈簧上的重量一樣朝目標移動,無論有或沒有超調。持續時間來自物理學。
實際的差別在於中斷。如果用戶在面板打開時再次點擊,貝塞爾動畫通常會從當前位置以零速度重新開始,這看起來像是一個故障。彈簧從目前位置和速度開始,因此運動會平滑地轉向新目標。當使用者用手勢丟出卡片或紙張時,同樣的情況也適用:彈簧會以手指的速度繼續移動。
彈簧也感覺自然,需要更少的決定:一兩個設定可以在不同尺寸的元素之間提供一致的感覺。
貝濟耶仍佔有一席之地。對於永不中斷的不透明度、顏色和過渡,短緩出更簡單,並且適用於 CSS,無需 JavaScript。許多團隊使用彈簧進行運動,並使用貝塞爾曲線進行淡入淡出。