玄武屏的"动画"分两大类，本节先讲清楚关系，下面 7 节展开各自细节。

动画的两层含义

层	名称	谁负责
页面级	翻页过渡（Transition）	页面之间的切换效果（fade / zoom / slide）
元素级	入场动画（Entrance）+ 状态动画（State）	每个元素自己的出现 / 变化效果

页面级见「9. 翻页过渡」，本 section 重点讲元素级。

元素动画的生命周期

1. 进入页面（page-enter）
   ├ order=0 元素：立即显示
   ├ order=1 元素：等待触发
   └ ...

2. 触发器（trigger）
   ├ click：用户点击鼠标
   ├ auto：自动按时间触发
   └ chain：上一动画结束后触发

3. 入场动画（entrance）
   ├ fade-in / fly-in / zoom-in / bounce-in / ...
   └ 16 种预设 + 自定义

4. 元素到达稳定态
   ├ 可与用户交互（GGB / HTML 双击）
   └ 可触发状态动画（如点击放大）

5. 离开页面（page-exit）
   └ 清理状态，等待下次进入

三个核心字段

每个元素的动画配置：

{
  "animation": {
    "entrance": "fade-in",      // 入场效果
    "trigger":  "click",         // 触发器
    "order":    1,               // 出现序号
    "duration": 0.4,             // 时长（秒）
    "delay":    0.1,             // 延迟
    "easing":   "ease-out"       // 缓动曲线
  }
}

order 编号规则

order 决定元素的"出现批次"：

order=0：进入页面立即显示（不需触发）
order=1：第 1 次点击 → 同时出现的元素
order=2：第 2 次点击 → 同时出现的元素
order=3：...

整个 order 序列结束后 → 再点击 → 翻到下一页

同一 order 的多个元素同时出现（可通过 delay 错开）。

trigger 类型

类型	行为	适用
click	点击触发（默认）	讲解节奏，老师 / 主讲人控制
auto	上一组结束后自动触发	演示自动播放、展厅自助
chain	与前一动画绑定，连续播放	复杂演示链
interaction	等待用户操作（如点击具体元素）	互动教学
time	进入页面后 X 秒触发	倒计时、定时强调

性能预算

单页元素	动画建议
< 20	任意动画，无压力
20–50	避免大范围 zoom + bounce
50–100	简化为 fade，禁用 box-shadow 动画
> 100	性能警告，建议拆页

详见「28. 动画性能预算」。

调试动画

编辑器顶部「视图 → 动画时间轴」打开调试面板：

• 横向时间线，所有动画排成轨道
• 拖动指针预览中间状态
• 单步播放每个 order
• 数字显示总时长

设计原则

来自迪士尼 12 原则与现代 UI 实践：

1. 运动符合物理直觉：用 ease-out（先快后慢）模拟惯性
2. 持续时间 200–400ms：太快不见、太慢拖沓
3. 同时出现的元素错开 50–100ms：避免视觉过载
4. 重点元素动画夸张：bounce / zoom 抢眼
5. 次要元素低调：fade 不抢戏

下一节展开 16 种入场动画。