动效时长动效
一个动画从开始到结束要花多久,时间长短决定它是一闪而过还是看得清。
- 动画太快了
- 等它动完好久
- 一闪就过去了
- 动效时长
- 过渡时长
- 动画持续时间
示例
0.4s 很快
1s
2s
4s 很慢
同时出发,各自用的时间不同 —— 越慢的越晚到,差的就是这段时间。
Web / iOS / Android 对照
Web原生支持
平台通用范围
transition-duration
CSS: transition-duration
iOS原生支持
平台通用范围
duration
SwiftUI: Animation.linear(duration:) 等的 duration 参数
不是独立属性,而是各种动画类型的参数:linear(duration:) 的官方描述是「在指定时长内以恒定速度移动的动画」。
Android原生支持
平台通用范围
durationMillis
Compose: tween(durationMillis = …)
官方原文:tween 在指定的 durationMillis 内用缓动曲线在起止值之间做动画。文档把 tween / keyframes 归为「基于时长的 AnimationSpec」,并说明 spring 与它们在处理中断上表现不同。
使用规范
什么时候用
- 需要让状态变化被看清时
- 需要与平台既有节奏保持一致时
什么时候别用
- 长到挡住操作时
- 用在基于物理的动画上时——那类动画不由固定时长驱动
容易混淆
跨端框架实现
- Flutter
DurationAnimationController(duration: Duration(…))
给 AI 的提示词
这条词条还没有经过验证的实现提示词。