三次贝塞尔曲线缓动描述了值如何在固定时间内从开始移动到结束,例如 300 毫秒的缓出时间。它是可预测的并且在任何地方都受支持,包括普通的 CSS。
相反,弹簧描述的是物理系统。您可以设置刚度、阻尼和质量,该值会像弹簧上的重量一样朝目标移动,无论有或没有超调。持续时间来自物理学。
实际的区别在于中断。如果用户在面板打开时再次点击,贝塞尔动画通常会从当前位置以零速度重新开始,这看起来像是一个故障。弹簧从当前位置和速度开始,因此运动会平滑地转向新目标。当用户用手势扔出卡片或纸张时,同样的情况也适用:弹簧会以手指的速度继续移动。
弹簧也感觉自然,需要更少的决定:一两个设置可以在不同尺寸的元素之间提供一致的感觉。
贝济耶仍然占有一席之地。对于永不中断的不透明度、颜色和过渡,短缓出更简单,并且适用于 CSS,无需 JavaScript。许多团队使用弹簧进行运动,使用贝塞尔曲线进行淡入淡出。