把模糊想法变成可执行说明

来源：motion-brief/SKILL.md。它产出设计 brief，不直接实现动画。此章是在学习其工作方式，不会在读书时强制启动访谈。

10.1 为什么先写说明

“做得高级一点”无法检验。需要明确两种状态、触发、频率、目的、方向、时间、中断与减少运动行为。代码返工常源于没决定这些事情，而非语法错误。

10.2 三条访谈规则

一次一个依赖性问题；能读代码发现的事实自己查；向用户询问感觉、产品参考与取舍，不让用户凭空回答贝塞尔数值。每题给一个有理由的建议，用户可以简单同意或修正。

这不是“任何任务都必须反复问问题”的通行证。已有明确授权和上下文时直接完成，普通实现数值由工程师提出；未知决策写成明确假设并继续可独立部分。

10.3 侦察五件事

组件及前后状态；点击/hover/键盘/数据/拖拽等触发；现有 CSS/WAAPI/Motion 技术栈；已有曲线/时长 tokens；全局 reduced-motion 处理。不存在也要写清，不向用户询问 package.json 里能查的内容。

10.4 九个决策问题

1. 频率：用户多久遇到一次？是否应立即响应？

2. 目的：运动增加了什么信息？若没有，允许判定不做。

3. 属性：状态 A/B 到底哪些值不同？只动必要属性。

4. 空间：来源、锚点、去向、前进/返回方向。

5. 中断：半途重触发、反向、拖动接管怎样处理？

6. 性格：参考产品或“清脆/柔和”等二选一，提供可见参考更好。

7. 曲线与时长：一起提出，先选节奏，再调总时间。

8. Reduce：移除运动后哪些信息仍需表达？

9. 规模与负载：有列表/滤镜/拖动时检查 200 项、加载中、真实手机。

不要每个组件都问无关的 200 项问题。问题应来自已发现的风险。

10.5 可直接套用的中文模板

动画说明：设置抽屉
结论：做短动画
触发：点击设置；Escape/关闭按钮退出
频率：偶尔
目的：表达面板位于当前界面右侧
进入：translateX(100%) → 0；遮罩 opacity 0 → 1
退出：返回右侧；遮罩淡出
锚点：右侧边缘
曲线：cubic-bezier(0.19, 1, 0.22, 1)
时长：进入 220ms，退出 180ms
中断：从当前视觉状态改目标，不重新从关闭位置播
减少运动：无位移，短淡入或直接显示
技术：沿用现有 Dialog/Drawer 原语的生命周期
交互：焦点进入、Escape、背景隔离、关闭后返回触发按钮
规模：长内容独立滚动，内部按钮不能误触拖动
待验证：手机键盘弹出后高度与滚动行为

这些数值是教学示例，已足够具体可做原型；验证后再替换为项目 tokens。

10.6 用户说“随便，你定”时

把自主决策写清：例如“假设这是高频后台操作，采用 180ms、无 bounce”。不要为了填表无限访谈，也不把自己的假设写成用户已经确认的事实。原文的确认环节约束的是该访谈工作流，并不覆盖用户已经明确授权的实施范围。

10.7 Skill 的实现方式

输入侦察→两个可提前结束的 gate→依次细化→固定模板→列出风险与验证。这是一个有状态的决策流程，质量依赖问题顺序与完成条件，而不是长篇“设计专家”角色描述。

自测与答案

1. “动画要自然”可执行吗？还缺触发、状态、时序和边界。

2. 用户不知道 duration 怎么办？提出配套曲线/时长并让其评价感觉。

3. 决定不加动画算失败吗？不是，有依据的 cut 是有效产出。