用途
Motion Choreography Patterns 聚焦于“编排”：多个运动部件如何在时间与空间上协同，以传达交互意图。它应与基础动效指南配合使用，帮助在复杂 UI 流程中构建清晰、一致、可上线的动效系统。
适用场景
- 设计包含多个动画元素的序列
- 构建错峰揭示、列表过渡与布局模式切换
- 实现模态、抽屉、弹出层与浮层的交互堆叠
- 处理密集界面中的添加/删除/重排场景
- 将用户输入（点击、拖拽、滚动）映射为动效响应
- 审查动效层级是否与产品层级一致
编排模型
将每个序列视为三层角色：
- 主角色（Primary actor）：代表状态变化的元素
- 辅助角色（Supporting actors）：强化上下文的邻近元素
- 环境角色（Environment actors）：背景、遮罩、容器、页面级连续性
除非交互模型要求反向，否则先动画主角色，再辅助角色，最后环境角色。
时间架构
使用可预测的节拍结构：
- 引导拍（Lead beat，0-80ms）：即时确认
- 主拍（Primary beat，120-240ms）：主要状态变化
- 跟随拍（Follow beat，20-60ms 偏移）：辅助上下文更新
- 稳定拍（Settle beat，80-180ms）：最终稳定
倾向非对称：退出略快于进入。
核心编排原则
- 每个节拍只有一个主导轴（避免冲突的方向信号）
- 限制同时进行的高幅度运动
- 仅在能改善扫描顺序与层级时使用错峰
- 相似组件之间保持节奏一致
- 在重排/回流过渡中保留空间锚点
模式库
具体配方与时间线参见：
- references/CHOREOGRAPHY_PATTERNS.md
- references/INTERACTION_SCENARIOS.md
可复用的错峰工具参见：
- references/STAGGER_SYSTEMS.css
输入到动效的映射
- 点击/轻触：80ms 内给出即时视觉响应
- 按压/长按：在提交过渡前包含按压状态
- 拖拽：动效直接跟随指针；仅在放下/提交时执行稳定动画
- 键盘导航：保持焦点连续性，避免令人迷失的位移
减少动效编排
当请求减少动效时：
- 尽可能移除空间位移
- 保留排序逻辑，改用不透明度/状态变化
- 用对比、分层与时间而非移动距离来保留层级
- 确保状态变化仍然明显且即时
反模式
- 延迟交互完成的级联动画
- 独立组件使用互不相关的缓动与时长令牌
- 频繁交互使用大位移距离
- 同时进行的进入与退出运动争夺焦点
- 核心任务界面中的装饰性无限动画
输出契约
使用本技能时，返回以下五个部分：
- 故事板（Storyboard）：谁移动、以什么顺序、为什么
- 时间线规格（Timeline Spec）：时长、偏移、缓动令牌与距离
- 实现方案（Implementation Plan）：CSS/JS/View Transition 结构
- 无障碍与降级（A11y + Fallback）：减少动效与不支持特性的策略
- 验证计划（Validation Plan）：性能与 UX 检查
QA 检查清单
上线前使用：
- references/QA_STORYBOARD_CHECKLIST.md
限制
资料未提供该技能的具体收费、价格、平台支持范围或实际效果数据，暂未提供。