动效时长动效

一个动画从开始到结束要花多久,时间长短决定它是一闪而过还是看得清。

  • 动画太快了
  • 等它动完好久
  • 一闪就过去了
  • 动效时长
  • 过渡时长
  • 动画持续时间

示例

Webtransition-duration原生支持四条轨道曲线相同,只有时长不同
0.4s 很快
1s
2s
4s 很慢

同时出发,各自用的时间不同 —— 越慢的越晚到,差的就是这段时间。

Web / iOS / Android 对照

使用规范

什么时候用

  • 需要让状态变化被看清时
  • 需要与平台既有节奏保持一致时

什么时候别用

  • 长到挡住操作时
  • 用在基于物理的动画上时——那类动画不由固定时长驱动

容易混淆

跨端框架实现

给 AI 的提示词

这条词条还没有经过验证的实现提示词。