状态机构建交互动效——点击、悬停、事件驱动
什么是 Lottie 状态机
传统的 Lottie JSON 只是一段预录制的动画——按下播放键就从头到尾播完，没有分支、没有条件。如果要做"点击按钮播放 A 状态、再点击播放 B 状态"这样的交互，开发端需要写代码：监听点击事件 → 调用 lottie.play() → 跳转到指定帧范围。
状态机（State Machines） 是 dotLottie 格式引入的核心能力，它把这种交互逻辑搬到了设计端：
- 你在 Creator 里定义多个动画状态（比如 "normal"、"hovered"、"pressed"、"disabled"）。
- 定义状态之间的转换条件（"鼠标点击 → 从 normal 转到 pressed"、"pressed 动画结束 → 转到 normal"）。
- 点导出 dotLottie，状态机逻辑被打包进文件。
- 开发端只需要嵌入这个 dotLottie 文件——点击、悬停等事件自动处理，零代码。
状态机的核心概念
| 概念 | 含义 |
|---|---|
| State（状态） | 动画的一个独立片段，比如"空闲"、"悬停"、"按下" |
| Transition（转换） | 两个状态之间的切换规则 |
| Trigger（触发器） | 触发转换的事件——鼠标点击、悬停、键盘按键、自定义事件 |
| Guard（守卫条件） | 触发转换前需要满足的条件 |
| Action（动作） | 转换时执行的附加行为 |
在 Creator 里创建状态机
- 先做好几段独立的动画——每个动画是一个状态。
- 打开状态机面板（State Machines）。
- 拖动画布上的"开始节点"连接到第一个状态。
- 从一个状态拖到另一个状态，中间会创建一条带转换规则的连线。
- 给每条连线设置 Trigger（比如 OnClick）。
- 保存导出 dotLottie（状态机数据只有 dotLottie 能打包，纯 JSON 不支持）。
开发端使用
嵌入 dotLottie 文件后，播放器自动识别状态机：
<dotlottie-player src="button.lottie" autoplay></dotlottie-player>上面这行代码就够了——鼠标点击时，播放器会自动识别状态机里 OnClick 触发器，从当前状态转换到下一个状态。不需要写任何事件监听和播放控制代码。
如果需要在代码端触发特定状态转换，也可以用 dotLottie API：
player.setInteraction('custom-event-name');适用场景
状态机特别适合这些交互模式：
- 按钮：normal → hovered → pressed → normal
- 卡片展开收起：collapsed → expanded（互斥触发）
- 表单校验状态：idle → valid → invalid → idle
- 游戏 UI：多种武器选择、技能释放、伤害数字动画
这些场景之前需要开发端写不少逻辑；现在用 dotLottie + 状态机，设计端就能把交互定义完整，开发端只负责嵌入。