关于 timing-principle-mastery
一份讲解动画时序的参考技能，说明如何用时长传达重量、情绪与节奏。内容涵盖帧率参考、动效与游戏示例，以及建立一致时长体系的方法。
主要功能
- 01帧率对应的时长范围
- 02物理与情绪时序
- 03界面与游戏时序示例
- 04时长层级设计
- 05停顿与对比的运用
适用场景
- 01设定界面转场时长
- 02塑造角色的重量感与情绪
- 03让动态图形配合节奏
- 04调整游戏输入与打击反馈
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/timing-principle-mastery确认已加载。
详细介绍
时间掌控
时间的分量
时间是指一个动作所需的帧数（或毫秒数）。它看似简单——不过是持续时间——却比任何其他原则都更能传达分量、情绪和能量。改变时间，含义也会随之改变。
核心理论
物理表达：时间能告诉我们物体的质量和受力情况。重物启动慢，停止也慢；轻物则会立即响应。保龄球和气球从同一高度落下——仅凭时间就能区分它们。
情绪表达：时间能告诉我们角色的状态。迟缓的时间节奏让人觉得疲惫、沮丧或身形庞大；利落的时间节奏则让人觉得警觉、紧张或轻盈。
帧率基础
在 24fps（电影标准）下：
- 1-2 帧：瞬间（撞击、弹出）
- 4-6 帧：快速（利落的响应）
- 8-12 帧：标准（自然运动）
- 16-24 帧：从容（有分量、经过斟酌）
- 24-48 帧：缓慢（戏剧性、沉重）
- 48+ 帧：极慢（庞大、水下、梦幻般）
在 60fps（UI/游戏）下，乘以 2.5 即可获得相同的体感。
时间类别
物理时间：由质量、重力和作用力决定（客观） 戏剧时间：由故事需求和情绪节拍决定（主观） 音乐时间：由节奏和速度决定（结构性） UI 时间：由响应速度和用户感知决定（功能性）
与其他原则的相互作用
缓入/缓出是时间的质感：整体持续时间与内部间隔相互配合。
预备动作会影响时间感知：较长的蓄势会让后续动作显得更快。
调度通过时间建立层级：重要元素与次要元素采用不同的时间节奏。
夸张往往意味着夸张时间：延长停顿，压缩动作。
领域应用
UI/动效设计
- 即时（0-100ms）：按钮反馈、切换开关——无可察觉的延迟
- 快速（100-200ms）：微交互、悬停状态——响应灵敏且能被看见
- 标准（200-300ms）：页面转场、模态框——舒适易懂
- 从容（300-500ms）：复杂转场、引导流程——留出时间吸收信息
- 缓慢（500ms+）：戏剧性揭示、环境动画——引人沉思
角色动画
- 通过时间塑造个性：活泼 = 快速节奏；暴躁 = 缓慢节奏
- 通过时间表现质量：大象行走 = 每步 24+ 帧；老鼠 = 4-6 帧
- 情绪状态：沮丧会放慢节奏；兴奋会加快节奏
- 表现年龄：年轻 = 利落地恢复；年老 = 缓慢、从容
动态图形
- 建立节奏：稳定的时间节奏会形成节拍
- 通过时间制造对比：缓慢铺垫，快速揭示
- 音乐同步：动画与音频节奏保持同步
游戏设计
- 响应性：输入到响应的时间定义了“游戏手感”
- 受击停顿：受击时的短暂停顿（增加分量感）
- 爽感：反馈事件采用快速、令人满足的时间节奏
常见错误
- 时间节奏一致：所有动作持续时间相同，会显得单调
- 过快：运动变得看不见、顿挫且令人不适
- 过慢：界面显得迟缓、响应不灵敏
- 忽视语境：在企业软件中使用休闲游戏的时间节奏
时间对比原则
时间通过对比获得意义。某个动作之所以显得快，是因为它之前有一个慢动作。某个姿势之所以显得有戏剧性，是因为周围有运动。单调的时间节奏缺少重点。
持续时间层级
建立关系一致的时间系统：
- 基本单位（例如，200ms）
- 快速 = 基本单位 × 0.5（100ms）
- 缓慢 = 基本单位 × 1.5（300ms）
- 戏剧性 = 基本单位 × 2（400ms）
系统化的时间节奏会让整体感觉协调；随意的持续时间则会显得混乱。
停顿
时机把控中，最有力的手段之一就是静止不动。保持姿势可以营造：
- 强调效果（让一个瞬间充分呈现）
- 期待感（动作开始前的意味深长的停顿）
- 可读性（给观众时间理解）
永远不要低估静止的力量。
实施启发
标准交互的默认时长可从 200-300ms 开始。根据以下因素调整：质量（越重，时长越长）、距离（越远，时长越长）、重要性（越关键，留给观众理解的时间越长）、情绪基调（越活泼，节奏越快）。当某些效果感觉“不对劲”时，问题往往出在时机上——在尝试其他调整前，先分别试试缩短 50% 和延长 50%。