链式动画（chain）让多个元素的动画首尾相连播放，组合成"复合动画"或"状态机"。

chain 是什么

普通动画：每个元素独立触发。

链式动画：一个元素的动画结束 → 下一个元素自动开始 → 再下一个 → ...

进入页面 → 点击一次
   ↓
[01] 标题淡入（400ms）
   └─ 完成后 →
[02] 副标题滑入（300ms）
   └─ 完成后 →
[03] 图片放大（500ms）
   └─ 完成后 →
[04] 总结句出现（200ms）

总时长：1400ms（无需额外点击）

配置方式

{
  "elements": [
    { "id": "title",    "order": 1, "trigger": "click" },
    { "id": "subtitle", "trigger": "chain", "chainAfter": "title" },
    { "id": "image",    "trigger": "chain", "chainAfter": "subtitle" },
    { "id": "summary",  "trigger": "chain", "chainAfter": "image"  }
  ]
}

第一个元素是"链头"用 click 触发；后续用 chain 串起来。

状态机：多步动画

复杂演示中，一个元素需要展现多个状态：

[ggb-animation]
  state 0: 静止
  state 1: 开始下落
  state 2: 碰撞
  state 3: 反弹
  state 4: 静止（落地）

用状态动画字段：

{
  "id": "ball",
  "states": [
    { "name": "rest",     "trigger": "click", "anim": "fade-in" },
    { "name": "falling",  "trigger": "chain", "anim": "fall"    },
    { "name": "collide",  "trigger": "chain", "anim": "shake"   },
    { "name": "bounce",   "trigger": "chain", "anim": "fly-up"  },
    { "name": "settle",   "trigger": "chain", "anim": "land"    }
  ]
}

主讲人点一次 → 整个状态机连贯播放。

chain 的高级控制

chainDelay：链中间加间隔

{ "trigger": "chain", "chainAfter": "step1", "chainDelay": 0.5 }

step1 完成后等 500ms 再开始当前动画。

chainCondition：条件链

只在某条件满足时链：

{
  "trigger": "chain",
  "chainAfter": "ggb",
  "chainCondition": "ggb.value('result') === 'correct'"
}

学生在 GGB 里得到正确答案时才链入"恭喜"动画。

chainBranch：分支链

不同条件触发不同分支：

{
  "id": "feedback",
  "trigger": "chain",
  "chainBranches": [
    { "condition": "answer === 'A'", "anim": "fly-in-left" },
    { "condition": "answer === 'B'", "anim": "fly-in-right" },
    { "condition": "true",            "anim": "fade-in" }
  ]
}

与 AI 数字人的链

数字人讲解员的 TTS 时间轴可以自动驱动动画链：

[t=0:00] 数字人开口
[t=0:03] chain → ball-fall 开始
[t=0:08] chain → collide 触发
[t=0:12] chain → 总结文字出现
[t=0:15] 数字人结束

所有动画与解说同步，主讲人无需手动点击。详见「20. AI 数字人元素」。

性能注意

链式动画过长会让单次播放成本累积：

• 单链 ≤ 5 段
• 总时长 ≤ 3 秒
• 超过建议拆成多个 order 让主讲人主动控制

调试链

「视图 → 动画时间轴」面板：

• 链式动画显示为"连接的轨道"
• 可单步执行链中任一段
• 鼠标悬停显示"等待 X 秒后触发"

常见模式

模式 1：状态机演示

适合：物理仿真、生物过程、操作流程

模式 2：叙事递进

适合：故事讲述、案例介绍、产品演示

模式 3：条件分支

适合：互动问答、自适应教学

下一节讲性能预算。