展开本页目录
开始前准备什么
- 当前工作区和计划可能限制 AI/状态机；无账号时用官方功能图和自制原生交互参考明确区分。
- 先阅读README与asset-identity.json；不要把作者原生参考或官方示例当成目标工具的本站实测。本题原生功能不要求apizt Key。
- 导入SVG
- 制作三态
- 定义事件
- 检查过渡
- 点击预览
- 复核输入
- 导出工程
1. 导入SVG
先导入原创 SVG，整理稳定图层名和三段时间范围。
先下载本题独立练习包并读README。原创SVG、有效Lottie加载段JSON与真实浏览器点击/完成状态截图；交互HTML是作者参考，不是Creator或dotLottie状态机导出。
2. 制作三态
按官方 AI 或 MCP 能力要求生成 idle、loading、success 三种状态，不把固定视频当状态机。
3. 定义事件
定义 click 进入 loading，done 进入 success，reset 回到 idle 的事件。
4. 检查过渡
检查过渡条件、初始状态及 loading 循环范围，防止 success 仍循环。
原生参考只帮助核对具体输入和验收动作；目标工具真实结果由你在相应许可、账号或硬件条件下保存。
5. 点击预览
在真实预览里按 click/done/reset，另测重复 click 与无事件等待。
6. 复核输入
截图三个实际状态及事件结果，核对图层、动画段和状态机输入名称一致。
7. 导出工程
导出当前支持的交互文件和静态 JSON，附本地事件测试说明及功能可用性限制。
保留原输入、参数和失败差异，填写checks.csv的actual/status；表格没有预填通过。
怎样确认已经完成
- 截图三个实际状态及事件结果，核对图层、动画段和状态机输入名称一致。
- 导出当前支持的交互文件和静态 JSON，附本地事件测试说明及功能可用性限制。
- 只有显式事件能切换状态；重复点击不应叠出多个循环。
常见问题
AI 怎么做可以点击切换状态的 Lottie 图标？
先导入分层SVG，定义idle/loading/success动画段，再用当前Creator AI能力生成输入、状态和过渡，逐事件预览。包内HTML是已验证的作者交互参考。
加载动画怎么在成功事件到来后停止循环？
让done从loading进入success，并停止loading循环；reset回到idle。重复click不应新建额外循环，包内浏览器参考可直接试这条事件合同。
练习包里哪些是目标工具的实际结果？
原创SVG、有效Lottie加载段JSON与真实浏览器点击/完成状态截图；交互HTML是作者参考，不是Creator或dotLottie状态机导出。 逐文件身份和实际生成方式见asset-identity.json。