← 返回 iOS 词条

缓动曲线

iOS原生支持

在 iOS 上叫timingCurve

也叫 easeInOut

SwiftUI: Animation.timingCurve(_:_:_:_:duration:)

官方描述是「由三次贝塞尔时间曲线创建的动画」,与 CSS 的 cubic-bezier 同形。easeIn / easeOut / easeInOut 是预设曲线。

动画在这段时间里是匀速走完,还是先快后慢、先慢后快。

  • 动画先慢后快
  • 结尾滑一下停住
  • 动得很生硬
  • 缓动曲线
  • 时间函数
  • 加速曲线

其他平台的相似实现

Web原生支持
transition-timing-function异名

官方定义是「设置受过渡影响的属性,其中间值如何计算」——本质是一条加速曲线,让速度在整段时长里变化。

看 Web 视角 →
Android原生支持
Easing异名

官方原文:基于时长的 AnimationSpec(如 tween 或 keyframes)用 Easing 调整动画的进度分数,使数值能加速和减速而不是匀速前进。

看 Android 视角 →

跨端框架实现

使用规范

什么时候用

  • 需要让动画看起来有物理感时
  • 需要区分进入与退出节奏时

什么时候别用

  • 用在没有时长的动画上时
  • 曲线夸张到让人等待时

容易混淆

iOS 出处

查看 Web / iOS / Android 完整对照 →