多元素 UI 需要错峰入场与协同运动时，用时间编排统一节奏

适用于页面加载、仪表盘显现、卡片网格、导航菜单、功能区块、数据可视化构建、引导步骤、列表填充等多元素动画序列，通过错峰延迟与共享缓动实现连贯表演。

适用场景

解决思路

1. 整体协同编排：像指挥乐团一样控制每个元素的进入时间、运动方式和元素间关系，协调多个元素跨时间工作。
2. 统一弹性风格：所有元素共享一致的 squash & stretch 弹性；不要混合弹跳与僵硬效果。
3. 错峰预备：主导元素先做 anticipation 预备动作，其他元素按顺序跟随。
4. 明确层级：用 staging 让主动作领先，次要元素只做支持，不与其竞争。
5. 强制 pose to pose：编排需要精确时序控制，不要用 straight ahead 式的逐帧随意推进。
6. 级联收尾：元素按顺序落地，并使用重叠的 follow through 跟随动作。
7. 共享缓动族：使用同一 easing 曲线的不同变体实现 slow in/slow out，保持整体连贯。
8. 协调路径：元素沿互补的 arcs 运动，不要朝随机方向移动。
9. 分配次要动作：每个元素都要有明确的 secondary action 角色，支撑整体构图。
10. 控制 timing：把 timing 作为编排核心，使用 stagger 延迟、duration 变化和 tempo 变化。
11. 按比例夸张：主要元素使用更强的 exaggeration，支持元素较弱。
12. 保持一致空间逻辑：共享 perspective、depth、scale 关系，符合 solid drawing。
13. 统一表演：让整个序列像同一个 composed moment，具备整体 appeal。
14. 线性错峰：等间隔延迟，用 `.item:nth-child(n) { transition-delay: calc(var(--index) * 50ms); }`。
15. 加速错峰：延迟间隔逐渐变小，例如 0ms、80ms、140ms、180ms。
16. 减速错峰：延迟间隔逐渐变大，例如 0ms、40ms、100ms、180ms。
17. 同族缓动：同一曲线配不同时长，如 `.primary` 400ms、`.secondary` 350ms、`.tertiary` 300ms 都使用 `cubic-bezier(0.16, 1, 0.3, 1)`。
18. 序列曲线：使用 `cubic-bezier(0.22, 1, 0.36, 1)` 作为 animation-timing-function，实现平滑开始、自信结束。
19. 错峰显现系统：为 `.orchestrated-item` 设置 `opacity: 0; transform: translateY(20px); transition: opacity 300ms ease-out, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);`。
20. 可见状态：为 `.orchestrated-item.visible` 设置 `opacity: 1; transform: translateY(0);`。
21. 用延迟变量或 nth-child 施加延迟：`.orchestrated-item:nth-child(1)` 0ms、`:nth-child(2)` 75ms、`:nth-child(3)` 150ms、`:nth-child(4)` 225ms。
22. 复杂序列用 JS 编排：定义 sequence 数组，每项包含 `el`、`delay`、`duration`，例如 `{ el: '.hero', delay: 0, duration: 500 }`、`{ el: '.title', delay: 100, duration: 400 }`、`{ el: '.subtitle', delay: 200, duration: 350 }`、`{ el: '.cta', delay: 350, duration: 400 }`。

适用边界 · 注意事项

• 只有单个元素或元素之间不需要按时间协调时，不要使用编排。
• 无法控制 transition-delay、animation-timing-function 等时序参数的环境不适用。
• 元素数量极多且性能预算紧张时，大量错峰动画可能导致掉帧，应先优化或减少元素。