需要跨组件、跨团队统一产品动效规范时使用：建立…

当要把产品内零散的动画决策标准化为一致、可实施的设计令牌层时，使用本技能。

适用场景

解决思路

1. 把动效定义为系统性的设计 token 层，而不是一组一次性动画。
2. 定义产品动效词汇表：duration scales、easing curves、choreography rules、accessibility handling，使动画决策一致、有目的且任何团队可实现。
3. 定义一组少量、命名的 duration token，并只按不同用例创建，4–6 个通常足够。
4. 建立 `duration-instant`: 50ms，用于必须感觉立即的状态变化（checkbox tick、toggle）。
5. 建立 `duration-fast`: 100ms，用于小元素过渡（tooltip 出现、chip 消失）。
6. 建立 `duration-normal`: 200ms，用于大多数默认过渡（dropdown 打开、focus ring）。
7. 建立 `duration-moderate`: 300ms，用于中等元素过渡（modal 进入、panel 滑动）。
8. 建立 `duration-slow`: 400ms，用于页面级过渡和复杂编排。
9. 建立 `duration-deliberate`: 600ms，用于刻意控制节奏、高强调时刻（onboarding reveal）。
10. 不要创建超过实际不同用例数量的 token；4–6 个值通常够用。
11. 定义命名的 easing token，并将其映射到语义用例。
12. 建立 `ease-standard`: `cubic-bezier(0.2, 0, 0, 1)`，用于大多数 UI 过渡——元素在状态间移动。
13. 建立 `ease-decelerate`: `cubic-bezier(0, 0, 0.2, 1)`，用于元素进入屏幕。
14. 建立 `ease-accelerate`: `cubic-bezier(0.3, 0, 1, 0.3)`，用于元素离开屏幕。
15. 建立 `ease-spring`: spring / `cubic-bezier(0.34, 1.56, 0.64, 1)`，用于俏皮或触感交互（FAB 展开、drawer 回弹）。
16. 建立 `ease-linear`: `linear`，仅用于循环动画（progress spinners、shimmer）。
17. 当多个元素一起动画时，应用 Stagger：一起进入的相关元素错开 30–50ms；让最重要的元素先出现。
18. 应用 Coordination：同一语义组中的元素使用相同 duration 和 easing。
19. 应用 Sequence total：错开序列的总时长不应超过 500ms。
20. 应用 Direction consistency：如果元素从右侧滑入，相关离开元素向左滑出。
21. 在系统层面处理 `prefers-reduced-motion: reduce` 媒体查询，而不是逐组件处理。
22. 在 reduced motion 下执行 Disable：移除 sliding、scaling、rotation 动画。
23. 在 reduced motion 下执行 Replace：替换为即时状态变化或简单 opacity 淡入淡出（opacity 过渡通常可接受）。
24. 在 reduced motion 下执行 Preserve：保留传达必要状态信息的动画（loading spinners、progress）。
25. 采用 Token approach：在 reduced-motion 下为所有 duration token 定义 `duration-instant` 覆盖（0ms 或 1ms），并全局应用。
26. 将 duration 和 easing 值定义为 CSS custom properties（或平台等价 token）。
27. 在 `:root` 层级、位于 `prefers-reduced-motion` 查询内应用 reduced-motion 覆盖。
28. 为每个 token 记录：name、value、use case 和一个 live example。
29. 将 motion token 纳入 design token 导出管线——它们应与 color 和 spacing token 放在一起。
30. 为每个产品定义 3–5 条 motion principles。
31. 可采用的原则示例：Purposeful——每个动画都传达状态变化或关系。
32. 可采用的原则示例：Quick——UI motion 绝不缓慢；尊重用户时间。
33. 可采用的原则示例：Physical——motion 遵循自然物理；进入时减速，离开时加速。
34. 可采用的原则示例：Accessible——所有 motion 尊重用户偏好，绝不引起不适。
35. 从更少 token 开始，只有当新用例确实不适配已有值时才添加。
36. 在所有低功耗设备上测试 motion——设计工具中流畅的动画在生产中可能卡顿。
37. 将 motion 纳入设计 QA 清单，与 color 和 spacing 并列。
38. 像记录什么应该动画一样清楚地记录什么不应该动画——不是所有东西都要动。

适用边界 · 注意事项

• 只制作一个具体动画或一次性交互时，不要建立完整 motion system；应改用 `animation-principles`。
• 产品没有跨组件/跨团队统一动效需求，或只有单一组件时，不需要完整 token 体系。
• 无法将 motion token 纳入设计令牌导出管线或工程落地流程时，先不要强推完整系统。