dotLottie 打包——Lottie Creator 或 LottieFiles 一键导出

谁来打包 dotLottie

dotLottie 的打包过程不需要你手动操作 ZIP 或写 manifest——Lottie 生态里已经有现成工具：

方式一：Lottie Creator 导出

在 Creator 里完成动画（包括状态机和 Motion Tokens）后：

1. 右上角菜单 → File → Export → dotLottie。
2. 设置文件名（比如 button-states.lottie）。
3. 选择是否包含主题皮肤。
4. 点击导出。

Creator 会自动：

• 把当前时间轴的动画作为 activeAnimation。
• 把所有导入的 SVG / 位图素材打包进 images/。
• 如果你创建了状态机，会写入 state_machines/。
• 如果你标记了 Motion Tokens，默认值写入 manifest。
• 最终打成一个 ZIP 文件，后缀改为 .lottie。

方式二：LottieFiles 在线转换

如果你已经有一个或多个 Bodymovin JSON 文件：

1. 登录 LottieFiles 账号。
2. 上传 JSON 文件到你的工作台。
3. 选中一个或多个文件，点击 "Export as dotLottie"。
4. （可选）设置多动画打包的 manifest 顺序。
5. 下载 .lottie 文件。

这个方式适合把已经做好的 JSON 批量转换为 dotLottie，不需要重新进 Creator。

方式三：命令行（开发者）

# 安装 dotLottie CLI
npm install -g @lottiefiles/dotlottie-cli

# 打包一个 JSON
dotlottie pack input.json -o output.lottie

# 打包多个 JSON（作为多动画 dotLottie）
dotlottie pack animation1.json animation2.json -o multi.lottie

# 指定 active 动画
dotlottie pack animation1.json animation2.json \
  --active animation1 \
  -o output.lottie

命令行适合集成到 CI/CD 流程——设计端产出 JSON 后，在构建脚本里自动打包成 dotLottie，再部署到 CDN。

方式四：运行时打包（lottie-web）

import { DotLottie } from '@lottiefiles/dotlottie-web';

// 从 JSON 加载后，可以导出为 dotLottie
const dotLottie = new DotLottie({
  canvas: document.getElementById('canvas'),
  src: 'loading.json',
});

// 播放后导出
dotLottie.addEventListener('load', () => {
  dotLottie.save('loading.lottie'); // 返回 Blob
});

适合在浏览器端做"用户自定义动画 → 导出 dotLottie"的场景（比如 LottieFiles 在线预览器里的"Save as dotLottie"）。

多动画 dotLottie 的场景

一个 .lottie 文件打包多段动画的典型场景：

按钮组件：normal + hovered + pressed + disabled 四种状态各一段动画 → 打包成一个 .lottie。设计端在 Creator 里给四段动画加状态机定义 → 开发端只需要嵌入这一个 .lottie，状态机自动处理状态切换。

应用品牌主题：同一段 Loading 动画，亮色系一段、暗色系一段 → 或者用 Motion Tokens 让一个动画适配两种颜色 → 打包成 dotLottie，manifest 里定义 themes 数组 → 运行时切换主题只需要切 token 值。

验证打包结果

用任何一个 dotLottie 播放器验证文件是否正确：

• LottieFiles 预览器：直接拖 .lottie 进去。
• lottie-player Web Component：<lottie-player src="file.lottie">。
• dotlottie-viewer（桌面应用，社区维护）。