← 返回 Web 词条Webtransition-duration原生支持四条轨道曲线相同,只有时长不同
动效时长
在 Web 上叫transition-duration
CSS: transition-duration
一个动画从开始到结束要花多久,时间长短决定它是一闪而过还是看得清。
- 动画太快了
- 等它动完好久
- 一闪就过去了
- 动效时长
- 过渡时长
- 动画持续时间
示例
0.4s 很快
1s
2s
4s 很慢
同时出发,各自用的时间不同 —— 越慢的越晚到,差的就是这段时间。
其他平台的相似实现
iOS原生支持
duration异名不是独立属性,而是各种动画类型的参数:linear(duration:) 的官方描述是「在指定时长内以恒定速度移动的动画」。
看 iOS 视角 →Android原生支持
durationMillis异名官方原文:tween 在指定的 durationMillis 内用缓动曲线在起止值之间做动画。
看 Android 视角 →跨端框架实现
- Flutter
DurationAnimationController(duration: Duration(…))
使用规范
什么时候用
- 需要让状态变化被看清时
- 需要与平台既有节奏保持一致时
什么时候别用
- 长到挡住操作时
- 用在基于物理的动画上时——那类动画不由固定时长驱动