SuperAPI AI 工具集

timing-calibration

设计与创作

查看项目

更新于 10-15 21:36

技能介绍

用途:当动画速度感觉不对——过快、过慢或不一致时,用迪士尼动画的 Timing 原则校准动画时长与节奏。

主要能力:按原则诊断问题。Timing:时长与动作类型不匹配,微交互 100-150ms、过渡 200-400ms、复杂揭示 400-600ms,UI 不超过 1s。Slow In and Slow Out:线性时间显得机械,入场用 ease-out、退场用 ease-in。Arcs:曲线路径比直线需要更长时间。Staging:相似元素应以相近速度动画,形成时序和谐。Secondary Action:次要动画应略慢于主动画,形成自然层级。

时长分级:Instant 0-100ms 用于悬停、微反馈;Fast 100-200ms 用于按钮、开关、小元素;Normal 200-300ms 用于卡片、模态、多数过渡;Slow 300-400ms 用于页面过渡、大元素;Deliberate 400-600ms 用于复杂揭示、引导。

快速修正:从 200ms 起步再调整;元素越大时长越长;距离越远时长越长;建立 3-4 个一致的时长值;用 2 倍速测试。

排查清单:多数 UI 时长是否低于 400ms;相似元素时序是否一致;是否应用缓动而非线性;较大位移是否时长更长;加速 30% 是否仍可读;减速 30% 是否显得迟钝;用户是否在等待动画;是否对比平台惯例(iOS/Android/Web)。

代码模式:通过 CSS 变量定义时长与缓动,如 --duration-fast: 150ms、--ease-out: cubic-bezier(0, 0, 0.2, 1),并按元素大小应用不同 transition-duration。

限制:资料未提供具体平台适配细节、性能影响或无障碍要求,暂未提供。