← 返回 iOS 词条
缓动曲线
在 iOS 上叫timingCurve
SwiftUI: Animation.timingCurve(_:_:_:_:duration:)
官方描述是「由三次贝塞尔时间曲线创建的动画」,与 CSS 的 cubic-bezier 同形。easeIn / easeOut / easeInOut 是预设曲线。
动画在这段时间里是匀速走完,还是先快后慢、先慢后快。
- 动画先慢后快
- 结尾滑一下停住
- 动得很生硬
- 缓动曲线
- 时间函数
- 加速曲线
其他平台的相似实现
Web原生支持
transition-timing-function异名官方定义是「设置受过渡影响的属性,其中间值如何计算」——本质是一条加速曲线,让速度在整段时长里变化。
看 Web 视角 →Android原生支持
Easing异名官方原文:基于时长的 AnimationSpec(如 tween 或 keyframes)用 Easing 调整动画的进度分数,使数值能加速和减速而不是匀速前进。
看 Android 视角 →跨端框架实现
- Flutter
CurveCurvedAnimation(curve: Curves.easeInOut)
使用规范
什么时候用
- 需要让动画看起来有物理感时
- 需要区分进入与退出节奏时
什么时候别用
- 用在没有时长的动画上时
- 曲线夸张到让人等待时