order 字段决定元素的"出现批次"。本节讲清楚 order 的工作原理 + 并行 / 串行的设计技巧。

order 是什么

每个动画元素有一个非负整数 order，相同 order 的元素同时出现：

进入页面
  ├ order=0 元素：立即显示（页面加载完即显示）
  ├ 第 1 次点击 → 同时显示所有 order=1 的元素
  ├ 第 2 次点击 → 同时显示所有 order=2 的元素
  ├ ...
  └ 全部 order 播完 → 再次点击 → 翻下一页

order=0：默认显示

不设 order 或 order=0 的元素不需要触发，进入页面立即显示。

适合：背景、装饰、母版元素、不重要的辅助内容。

并行：相同 order

{
  "elements": [
    { "id": "title",      "order": 1 },
    { "id": "subtitle",   "order": 1 },
    { "id": "decoration", "order": 1 }
  ]
}

效果：一次点击 → 三个元素同时淡入。配合 delay 错开 100ms 看起来更优雅：

{
  "elements": [
    { "id": "title",      "order": 1, "delay": 0   },
    { "id": "subtitle",   "order": 1, "delay": 0.1 },
    { "id": "decoration", "order": 1, "delay": 0.2 }
  ]
}

串行：不同 order

{
  "elements": [
    { "id": "step1", "order": 1 },
    { "id": "step2", "order": 2 },
    { "id": "step3", "order": 3 }
  ]
}

效果：每点击一次出一个，三次点击展现三步。

自动重排

编辑器右侧面板有"动画顺序"列表，拖拽即可重新排序：

① 标题      [order=1]  [上移]
② 副标题    [order=1]  [上移][下移]
③ 第一段    [order=2]  [上移][下移]
④ 第二段    [order=3]  [下移]

复杂演示的 order 设计

模式 A：单线递进

order 1: 提出问题
order 2: 第一种思路
order 3: 第二种思路（划掉第一种）
order 4: 最优解

模式 B：分组对比

order 1: 左侧"传统方式"+右侧"新方式"标题
order 2: 左侧 3 个特点
order 3: 右侧 3 个特点
order 4: 中间对比箭头
order 5: 结论

模式 C：流程动画

order 1: 起点出现
order 2: 流程线绘制（chain trigger 衔接）
order 3: 中点出现
order 4: 流程线继续
order 5: 终点出现 + 结果

order 跳过

某些元素可以 order=99 永远不在常规序列触发，只通过特殊条件（如 interaction）触发：

{
  "id": "answer",
  "order": 99,
  "trigger": "interaction",
  "interactionTarget": "btn-show-answer"
}

学生答题前不显示，点击"查看答案"按钮才出。

同 order 的随机入场

让相同 order 的元素随机顺序出现：

{
  "orderRandomDelay": [0.1, 0.5]  // 随机 100–500ms
}

适合：列表项不严肃出现，营造"自然涌现"感。

order 与 chain 的区别

维度	order 不同	chain trigger
触发方式	各自独立点击	上一动画完结后自动
视觉感	主讲人节奏	单一动画（首尾相连）
可中断	是	否

错误示范

❌ 过多 order 层级：单页 > 8 个 order 等级会让主讲人累，听众也疲劳。建议拆页。

❌ 逻辑跳跃：order=1 出"结论"，order=2 出"前提"——颠倒就乱了。

❌ 遗漏触发：某关键元素没设 trigger，永远不出现。

下一节讲缓动曲线。