用途
该技能用于编排多步骤动画序列，适用于页面切换、引导流程、向导步骤、复杂揭示，以及任何需要整体编排的动画序列。其核心思路是把迪士尼十二动画原则应用到多步运动编排中，让多个元素的动画形成有节奏、有主次的整体，而不是各自独立播放。
主要能力
资料列出了将十二动画原则应用于序列编排的方式：
- 挤压与拉伸：序列中每个元素可独立压缩或扩展，以获得更自然的观感。
- 预备动作：序列以准备阶段开始，在运动开始前有短暂停顿或聚集。
- 舞台调度：通过序列引导注意力，最重要的元素最先或最后动画。
- 逐帧与关键帧：为每一步规划关键帧，在实现前先映射整个序列。
- 跟随与重叠：元素不同步运动，起始错开 50-100ms，让运动形成级联。
- 缓入缓出：每一步都缓动，整个序列也应缓动——中段更快、两端更慢。
- 弧线：跨空间的过渡遵循弧线，例如页面左滑应略微弯曲，而非线性滑动。
- 次要动作：主过渡加次要细节，例如页面滑动的同时内部元素淡入或缩放。
- 时间节奏：步骤重叠为前一步时长的 30-50%；UI 总序列 300-800ms，戏剧性场景最多 1500ms；步骤间隔 0-100ms，优先重叠。
- 夸张：序列本身即夸张，单个步骤保持细微。
- 立体感：保持空间一致性，若 A 向左移动，B 应从左侧进入。
- 吸引力：序列讲述一个故事，有开头、中段、结尾，并给出令人满意的收束。
使用方式
资料提供了时间建议表，按序列类型给出总时长、步骤数与步骤重叠比例：
- 标签切换：300ms，2 步，50% 重叠
- 页面过渡：500-600ms，2-3 步，30% 重叠
- 弹窗打开：400ms，3 步，40% 重叠
- 向导步骤：400ms，2 步，50% 重叠
- 引导流程：800-1200ms，4-6 步，30% 重叠
- 戏剧性揭示：1000-1500ms，5-8 步，40% 重叠
实现模式方面，资料给出了交错序列的 CSS 示例：为 .sequence-item 设置初始 opacity: 0 与 translateY(20px)，使用 reveal 关键帧在 400ms ease-out 后 forwards 结束，并通过 nth-child 分别设置 0ms、80ms、160ms、240ms 的 animation-delay。
页面过渡编排示例：.page-exit 使用 page-out 250ms ease-in forwards；.page-enter 使用 page-in 300ms ease-out 200ms forwards。page-out 关键帧结束于 opacity: 0 与 translateX(-30px)；page-in 关键帧从 opacity: 0、translateX(30px) 到 opacity: 1、translateX(0)。
序列编排公式（JavaScript）：选取所有 .sequence-item，设定 totalDuration 为 600ms、overlap 为 0.4（40% 重叠），对每个元素计算 stepDuration = totalDuration / items.length，delay = index * stepDuration * (1 - overlap)，并写入 item.style.animationDelay。
适用场景
适用于需要多步骤、多元素协同的界面动画编排，例如标签切换、页面过渡、弹窗打开、向导步骤、引导流程与戏剧性揭示等。
限制与关键规则
- 步骤重叠 30-50%，既不留空隙，也不要同时开始。
- 功能性 UI 的总序列控制在 800ms 以内。
- 以 0.5 倍速测试以验证编排效果。
- 超过 500ms 的序列应提供跳过选项。
- 对 prefers-reduced-motion，直接切换状态，不播放序列。
关于该技能的收费、价格、平台支持范围等信息，资料暂未提供。