Skip to main content
Language简体中文
物理与代币4 分钟阅读2026 年 10 月

为什么弹簧动画比三次贝塞尔过渡更好?

简短回答

弹簧更适合交互式 UI,因为它们可以从元素的当前速度和位置开始,因此中断的动画和释放的手势可以顺利继续。只需很少的设置,它们也感觉很自然。三次贝塞尔曲线仍然很好,而且更简单,适用于淡入淡出、颜色变化和永不中断的运动。

核心要点

  • 三次贝塞尔曲线具有固定的持续时间和形状
  • 弹簧由刚度、阻尼和质量定义,并根据物理学的规定而稳定
  • 弹簧具有速度,因此干扰和手势保持平稳
  • 贝塞尔曲线更简单,并且适用于淡入淡出和非交互式过渡
  • 许多现代平台,包括 SwiftUI,默认使用弹簧

三次贝塞尔曲线缓动描述了值如何在固定时间内从开始移动到结束,例如 300 毫秒的缓出时间。它是可预测的并且在任何地方都受支持,包括普通的 CSS。

相反,弹簧描述的是物理系统。您可以设置刚度、阻尼和质量,该值会像弹簧上的重量一样朝目标移动,无论有或没有超调。持续时间来自物理学。

实际的区别在于中断。如果用户在面板打开时再次点击,贝塞尔动画通常会从当前位置以零速度重新开始,这看起来像是一个故障。弹簧从当前位置和速度开始,因此运动会平滑地转向新目标。当用户用手势扔出卡片或纸张时,同样的情况也适用:弹簧会以手指的速度继续移动。

弹簧也感觉自然,需要更少的决定:一两个设置可以在不同尺寸的元素之间提供一致的感觉。

贝济耶仍然占有一席之地。对于永不中断的不透明度、颜色和过渡,短缓出更简单,并且适用于 CSS,无需 JavaScript。许多团队使用弹簧进行运动,使用贝塞尔曲线进行淡入淡出。

常见问题

CSS可以做弹簧动画吗?

CSS 没有物理弹簧,但 Linear() 缓动函数可以在固定持续时间内近似弹簧曲线。它不承载中断之间的速度。

UI 的良好弹簧设置是什么?

对于大多数 UI,一开始没有或很少有过冲,对于有趣的元素则有小幅反弹。根据真实设备上的感觉进行调整。

弹簧跑得慢吗?

在现代库和运行时中并不明显。成本主要在于移动的渲染,而不是弹簧数学。

每个动画都应该是春天吗?

不。使用弹簧进行移动和交互,并使用简单的缓动进行淡入淡出和颜色变化。

相关指南和示例

感受浏览器中的差异

并排比较弹簧和贝塞尔曲线,中断它们,然后复制您喜欢的值。

打开弹簧发生器
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →