背景
Lottie 是一种基于 JSON 的动画文件格式，前面一篇关于lottie动效的文章 《Lottie动效实践》详细介绍了 lottie 的特点、用法、实践中遇到的问题及其解决办法，也有提到Lottie的痛点, 其中一条是文件大小。
实践中我们发现做一个简单的人物形象动画、使用序列图后，3s的动画导出图片资源数量竟高达180张，即使对全部图片资源进行压缩，整个文件依旧很大。
为什么要使用dotLottie？
如上，dotlottie能极大优化体积，因为它以二进制的数据格式进行存储。
dotLottie是什么？
dotLottie（.lottie）是一个新的、基于 zip 的文件格式，用于封装 Lottie 动画，旨在简化 Lottie 动画的使用和管理。
这种格式由 LottieFiles 推出，并得到了 Lottie 社区的广泛接受。dotLottie 格式的文件包含一个主要的 JSON 动画文件和所有相关的资源文件（如图片、音频等）。
所有的动画数据和资源都打包压缩在一个文件中，方便分享和传输。
它是一种轻量级的动画文件格式，可以在各种平台（如网页、iOS 和 Android）上实时渲染复杂的动画，使动画的管理和分发更加便捷。
主要特点
- 打包：dotLottie 文件可以将多个 Lottie 动画 (.json 文件) 及其相关资源打包到一个压缩文件中，简化了文件管理和分发。
- 压缩：dotLottie 文件使用 ZIP 压缩技术，显著减少了动画文件的大小，从而提高了加载速度和性能。
- 组织：通过打包，所有相关资源都集中在一个文件中，避免了资源丢失和路径问题。
- 跨平台支持：dotLottie 文件可以在各种支持 Lottie 的平台上使用，包括网页、iOS 和 Android。
dotLottie的缺点
- dotLottie 格式比原生的 JSON 格式更复杂，因为它需要处理 zip 文件和资源路径的问题。
- 目前，并非所有 Lottie 库都支持 dotLottie 格式。
如何使用 dotLottie？
use cdn：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>@lottiefiles/dotlottie-web | basic example</title>
</head>
<body>
<!-- Canvas element where the Lottie animation will be rendered -->
<canvas id="canvas" width="300" height="300"></canvas>
<script type="module">
import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";
new DotLottie({
autoplay: true,
loop: true,
canvas: document.getElementById("canvas"),
src: "lottie",
});
</script>
</body>
</html>
use @lottiefiles/dotlottie-web：
<canvas id="dotlottie-canvas" style="width: 300px; height:300px;"></canvas>
import { DotLottie } from '@lottiefiles/dotlottie-web';
const dotLottie = new DotLottie({
autoplay: true,
loop: true,
canvas: document.querySelector('#dotlottie-canvas'),
src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie"
});
总结
dotLottie 是一种用于存储和传输 Lottie 动画的文件格式，Lottie 是一个开源的动画文件格式，由 Airbnb 开发，广泛用于移动应用和网页中，以实现高质量的动画效果。
传统上，Lottie 动画是以 JSON 文件的形式存储的，但随着动画的复杂性增加，单个 JSON 文件可能会变得非常大且难以管理。
dotLottie 文件格式（扩展名为 .lottie）通过将多个 Lottie JSON 文件和相关资源（如图像）打包到一个压缩文件中，解决了这个问题。它使用 ZIP 压缩格式，使得文件更小、更易于传输和管理。
dotLottie 文件的优点
- 文件压缩：通过 ZIP 压缩，减少了文件大小。
- 资源整合：可以将多个动画和相关资源打包在一个文件中，便于管理。
- 易于传输：由于文件大小减小，传输速度更快。
- 标准化：提供了一种标准化的方式来存储和分发 Lottie 动画。
dotlottie 在体积优化方面表现很突出，但有些场景并不适用，比如动画中使用到 logo (如头像)需要动态替换，而它是以二进制格式存储的，只能将该.lottie 格式转为 json 文件格式再处理替换逻辑，故我们需要根据场景来判断是否选择它。
