EasyLottie指南
什么是.lottie文件？ dotLottie 与 Lottie JSON
.lottie 文件的内部内容、版本之间的格式如何变化、如何打开文件，以及 dotLottie 何时实际节省字节的测量测试。
简短的回答
.lottie 文件通常称为 dotLottie，是具有固定内部布局的 ZIP 存档。它包含一个或多个 Lottie 动画（如 JSON），以及可选图像、字体、主题和状态机，以及列出内部内容的清单。动画数据与您已经知道的 Lottie JSON 相同。 dotLottie改变了包装，而不是动画。
该格式的存在是为了解决交付问题。带有外部图像的 Lottie 是多个必须一起传输的文件，一组相关的动画是多个请求。单个包更容易下载、缓存和传递。
.lottie 文件里面有什么
将任何 .lottie 文件重命名为 .zip 并打开它。在当前的 dotLottie 2.0 规范下，您将在根目录和短文件夹名称中找到一个清单.json：a 表示动画，i 表示图像，还可以选择 t 表示主题，s 表示状态机，f 表示字体。清单必须包含设置为“2”的版本字段和动画数组，其中每个条目都有一个与文件夹中的文件匹配的 ID。存档使用 Deflate 进行压缩，注册的媒体类型为 application/zip+dotlottie。
较旧的文件遵循 1.0 规范，该规范使用较长的文件夹名称：JSON 的动画和位图的图像。两个版本都需要包含版本和动画的清单。我们的品牌徽章.lottie是一个最小的2.0包，一个83字节清单加上一个动画文件。 Product-card.lottie 添加一个 i 文件夹，将卡的屏幕截图保存为普通 PNG，动画 JSON 使用路径 /i/img_0.png 引用该文件夹。
| 内容 | 版本1.0文件夹 | 版本2.0文件夹 |
|---|---|---|
| Lottie 动画 (JSON) | 动画/ | 一个/ |
| 图片资产 | 图片/ | 我/ |
| 主题 | - | 吨/ |
| 状态机 | - | s/ |
| 字体 | - | f/ |
| 清单 | manifest.json | 清单.json，版本“2” |
dotLottie、Lottie JSON 与 ZIP 对比
所有三个都携带相同的动画数据。它们的不同之处在于一起传输的文件数量以及压缩方式。
| 格式 | 它是什么 | 最适合 |
|---|---|---|
| .json | 动画数据的一个文本文件 | 由压缩 Web 服务器提供的单个矢量动画 |
| .lottie | 带有清单和固定文件夹的 ZIP | 大量图像动画、多个相关动画、主题或交互性 |
| .zip | JSON 和图像的临时文件夹 | 移交引用外部图像文件的 JSON |
如何打开或预览 .lottie 文件
将文件放入 EasyLottie 预览中。它将在浏览器中解压存档，通过读取清单查找动画，解析所有图像，然后开始播放。文件信息面板显示正在播放包内的哪个文件，及其帧速率、持续时间和尺寸。没有上传任何内容。
这是在集成之前确认下载的 .lottie 包含您期望的动画的最快方法。如果需要重新着色或替换图像，请先提取JSON；编辑工具适用于 JSON 或 ZIP。
您应该运送哪一件？
衡量而不是假设。对于压缩 JSON 的 CDN 提供的单个小型矢量动画，在我们的测试中，普通 JSON 下载的内容较小。通过一个嵌入图像，两者可以有效地捆绑在 HTTP 上，而磁盘上的软件包则小了 27%。对于一起加载的多个动画，或者使用 dotLottie 主题和状态机的播放器，包格式本身是值得的。
还要检查你的运行时间。如果应用程序直接使用lottie-web，则JSON是本机输入。如果已经使用 dotLottie 播放器，.lottie 会删除拆包步骤。无论您从设计师或市场收到什么，请先预览，这样您就知道自己正在处理什么。
快速清单
- 将副本重命名为 .zip 以查看 .lottie 包含的内容。
- 检查清单版本：版本1使用动画/，版本2使用/。
- 在判断大小时，与 gzip 或 Brotli JSON 进行比较，而不是与原始 JSON 进行比较。
- 将 dotLottie 用于图像、多个动画、主题或状态机。
- 切换格式之前，请确认您的播放器支持 .lottie。
重现工作流程
使用这些本地示例文件重复本指南中描述的检查。在生产项目中使用该文件之前请先检查该文件。
测试结果：.lottie比JSON小吗？
我们将两个动画打包为符合规范的 dotLottie 2.0 文件，并使用标准 Deflate ZIP：一个纯矢量徽章和一张卡片，其中一个 27 KB PNG 以二进制文件形式存储在 i/ 中。我们将每个文件与其存储的普通 JSON 进行比较，并且 Web 服务器通常会使用 gzip 或 Brotli 发送它。所有四个文件都在 EasyLottie 查看器中打开。
| 测量 | 矢量徽章，无图像 | 带一张PNG卡 |
|---|---|---|
| 存储时的 JSON | 6,823 字节 | 38,540 字节 |
| JSON 使用 gzip 发送 | 774 字节 | 28,349 字节 |
| JSON 与 Brotli 一起发送 | 669 字节 | 28,024 字节 |
| .lottie封装 | 1,075 字节 | 28,223 字节 |
| .lottie 与 gzip JSON | 39%较大 | 0.4%较小 |
与原始文件相比，dotLottie 要小得多：徽章的 84 百分比和卡片的 27 百分比，主要是因为 PNG 不再是基本 64 文本。只要文件在传输过程中未压缩，例如捆绑到应用程序中的资产，这一点就很重要。
与浏览器实际从压缩 JSON 的服务器下载的内容相比，增益消失了。矢量徽章比 .lottie 大 39%，因为 ZIP 标头和清单成本约为 300 字节。无论哪种方式，该卡的误差都在半个百分点之内。选择 dotLottie 的实际原因是打包、多个动画、主题和状态机，而不是 HTTP 的原始字节。
了解极限
- 并不是每个玩家都会读.lottie。经典的lottie-web loadAnimation 调用需要 JSON； dotLottie 需要支持 dotLottie 的播放器或拆包步骤。
- 版本 1 和版本 2 软件包使用不同的文件夹名称。为一种工具编写的工具可能无法在另一种工具中找到动画。
- 适用于 JSON 的编辑工具（包括大多数颜色编辑器）需要首先提取 JSON。 .lottie 文件是一个容器，而不是不同的动画格式。
- 我们的大小测试使用两个小文件。大型、图像较多的动画的结果有所不同，应根据您自己的资产进行衡量。
如果你的结果不同
- 1.如果 .lottie 文件无法打开，请将副本重命名为 .zip 并打开它。如果也失败，则该文件已损坏或不是 dotLottie 包。
- 2.在 ZIP 内部，查找 manifest.json 和动画文件夹（版本 1）或文件夹（版本 2）。动画就是里面的JSON文件。
- 3.如果您的播放器无法加载 .lottie，请提取 JSON 及其图像，然后加载 JSON，同时保持图像路径完整。
- 4.如果动画播放但图像丢失，请检查图像文件夹是否存在：版本 1 中的图像，版本 2 中的图像。
常见问题
什么是 .lottie 文件？
dotLottie 文件是一个 ZIP 存档，具有清单和固定文件夹，其中包含一个或多个 Lottie JSON 动画以及可选图像、主题、状态机和字体。
.lottie 总是小于 JSON 吗？
不会。我们的 6,823 字节徽章变成了 1,075 字节 .lottie，但使用 gzip 发送的相同 JSON 是 774 字节。内部包含 27 KB 映像，.lottie 和 gzip JSON 的误差在 0.5% 以内。仅当文件在传输过程中未压缩时，dotLottie 才能明显获胜。
如何打开 .lottie 文件？
将其放入 EasyLottie Preview 中，该预览会解压并在本地播放。您还可以将其重命名为.zip并使用任何存档工具打开它以查看内部的JSON。
dotLottie 2.0 发生了什么变化？
文件夹名称变为单个字母（a、i、t、s、f），清单版本为“2”，规范添加了主题、状态机和字体。
我可以直接编辑 .lottie 文件吗？
首先提取JSON。颜色和图像编辑器可处理动画 JSON 或 JSON 的 ZIP 以及图像；如果您的播放器需要.lottie，您可以事后重新打包。
主要来源
根据下面的原始运行时或格式文档检查了技术行为。