EasyLottie指南
如何将 MP4 转换为 Lottie 以用于 Web 和应用程序
将短视频转换为 Lottie ZIP 的规划指南：输出的实际内容、导出前如何预测其大小以及哪些设置最重要。
MP4 到 Lottie 的真正含义
普通的 MP4 是像素视频。经典的 Lottie 动画是矢量数据：形状、路径和关键帧。没有浏览器工具可以将任意素材转换为质量可靠的小型可编辑矢量 Lottie，并且声称可以逐帧跟踪轮廓的工具通常效果不佳。
实际的转换是不同的。该转换器逐帧解码视频，可选择删除纯色背景，并将帧作为图像写入 ZIP 以及按顺序播放它们的 Lottie JSON。任何支持图像资源的播放器都可以像对待任何其他 Lottie 一样处理该剪辑：循环它、暂停它或从代码触发它。当您的应用程序已经具有 Lottie 管道并且源材料恰好是视频（例如 AI 生成的贴纸或产品短片）时，这非常有用。
导出前预测输出大小
由于存储了每一帧，因此 Lottie ZIP 的大小接近于帧计数乘以一帧的大小。帧计数是持续时间乘以帧速率。画框尺寸取决于尺寸以及图片的细节程度。上面的测量表给出了 480 像素的真实每帧数据：对于纯色，大约为 1.6 KB；对于典型 UI 剪辑，大约为 2 KB；对于详细的素材，超过 6 KB；对于具有柔和边缘的渐变主题，大约为 10 KB。
使用这些数字来检查计划的完整性。 24 fps 处的 3 第二个环路是 72 帧。 UI 剪辑复杂度约为 140 KB，这对于入门屏幕来说是合理的。 30 fps 处的 10 第二个剪辑是 300 帧；繁忙片段的复杂性接近 2 MB，这对于大多数登陆页面来说都太重了。当算术结果很大时，解决办法几乎总是减少持续时间和帧速率，而不是降低质量。
| 剪辑 | 帧数 | 毛坯 Lottie ZIP 尺寸 |
|---|---|---|
| 2 位于 24 fps，平面贴纸 | 48 | 关于75 KB |
| 3 位于 24 fps，UI 动画 | 72 | 关于140 KB |
| 4 位于 12 fps，渐变贴纸 | 48 | 关于460 KB |
| 4 位于 24 fps，渐变贴纸（实测） | 96 | 918 KB |
| 10 位于 30 fps，详细镜头 | 300 | 关于1.9 MB |
逐步转换
该转换器完全在浏览器中运行。解码使用 WebCodecs API，键控通过 WebGL2 在 GPU 上运行，编码在本地进行。源文件未上传。
- 打开 MP4 至 Lottie 并放入 MP4、MOV、WebM、GIF 或一组 PNG、JPG 或 WebP帧。
- 剪掉主题之外的所有内容，然后设置入点和出点。修剪到仍然可读的最短循环。
- 如果背景是纯色，请从预览中选择它并调整容差、柔和度、去溢出和窒息。如果源已经具有透明度或者您想保留背景，请跳过此步骤。
- 选择Lottie ZIP，设置长边和帧率，然后导出。
- 在真实页面背景上预览结果，然后在您的应用程序使用的播放器中进行测试。
选择目的地的设置
选择动画实际显示的最大尺寸，乘以您关心的设备像素比。 2x 屏幕上的 240 像素插槽需要 480 像素，而不是 1,080。选择运动的帧速率：UI 过渡和贴纸通常在 12 至 15 fps 上看起来不错，而快速相机运动则需要 24 或更高。
如果网页只需要透明视频，先比较 WebM 导出，再决定是否使用 Lottie，并用自己的素材实测。在 9 月的纯色简单素材测试中，WebM 体积约为 Lottie ZIP 的十分之一；渐变贴纸的结果却相反：WebM 为 1,215,389 字节，比 918,089 字节的 Lottie ZIP 大 32%，还丢失了四帧。GIF 最大，为 1,316,183 字节，且像素只能完全透明或完全不透明。格式比较指南详细解释了这些取舍。
集成 Lottie ZIP
解压缩包并保留其文件夹结构。 JSON 通过相对路径引用每个帧，因此拼合文件夹或重命名图像会中断播放。从同一基本路径提供 JSON 和图像文件夹，然后像加载任何 Lottie 一样使用播放器加载 JSON。
检查您支持的最低设备上的内存。播放器将解码后的帧保存在内存中，480 乘 480 处的 300 帧比相同长度的矢量动画要好得多。对于长或大的剪辑，原生视频元素可能是更好的工具。
快速清单
- 导出前估计帧和大小：持续时间 × fps × 每帧字节数。
- 修剪到最短的循环并裁剪到主题。
- 在降低质量之前降低帧速率。
- 仅当背景为一致的纯色时才设置关键帧。
- 根据实际显示插槽调整输出大小，而不是源分辨率。
- 集成时保留ZIP的文件夹结构。
重现工作流程
使用这些本地示例文件重复本指南中描述的检查。在生产项目中使用该文件之前请先检查该文件。
测试结果：每帧输出大小，四个来源
所有源素材均通过转换器界面导出，使用相同设置：长边 480 像素、24 fps、质量 0.7、完整时长、最多 450 帧。前三行数据于 2026 年 9 月 9 日在桌面 macOS 的 Chrome 152 中测得；渐变贴纸于 2026 年 10 月 11 日使用相同方法测量。所有行均为 Lottie ZIP 导出结果。
| 来源 | Lottie ZIP 输出 | 每帧字节数 |
|---|---|---|
| 绿屏形状、4 s、480×480、平面颜色 | 153,023 字节，96 帧 | 关于1,590 |
| UI动画，4 s，480×270 | 187,773 字节、96 帧 | 关于1,960 |
| 60 fps 测试图案、15 s、480×270、繁忙细节 | 2,279,886 字节、360 帧 | 关于6,330 |
| 渐变贴纸，4 s，480×480，带键 | 918,089 字节，96 帧 | 关于9,560 |
帧计数由持续时间乘以帧速率设置，大小大致为帧计数乘以每帧字节数。每帧的字节数取决于图片：平面形状压缩良好，而渐变、软边缘和细节则不然。在相同分辨率下，渐变贴纸每帧的成本是平面贴纸的六倍。
15-第二个 60 fps 源未生成 900 帧。所请求的 24 fps 给出了 360 框架，位于 450 框架天花板内。降低帧速率是最便宜的尺寸减小方法，因为它会删除帧而不是缩小帧。
了解极限
- 视频成为 Lottie 封装内的光栅图像序列。它不会变成可编辑的矢量形状，也不会急剧放大。
- 尺寸不保证小于源MP4。 Our 104,074-byte sticker MP4 became a 918,089-byte Lottie ZIP, because video codecs store differences between frames and image sequences store every frame.
- WebM 导出会在浏览器中实时录制，可能丢帧。贴纸的 WebM 保留了 96 帧中的 92 帧；9 月测试的两个素材分别保留了 96 帧中的 81 帧和 74 帧。
- 编解码器支持取决于浏览器。 HEVC 或 H.265 MP4 文件可能无法解码；首先重新导出为 H.264。
- 输入仅限于 100 MB，输出为 15 第二选择、450 帧和 1,920 像素长边。
如果你的结果不同
- 1.如果源无法加载，请检查编解码器。重新导出为H.264 MP4并重试；重命名文件不会更改编解码器。
- 2.如果输出太大，请按以下顺序减少：持续时间、帧速率、尺寸。帧速率每减半，帧数就会大致减半。
- 3.如果抠像边缘在目标页面上看起来呈绿色，请预览真实的背景颜色并在增加容差之前增加去溢色。
- 4.如果 Lottie 播放器没有显示任何内容，请解压缩包而不压平文件夹。 JSON 通过相对路径引用图像。
常见问题
MP4能否成为真正的矢量Lottie？
不自动，质量可靠。该转换器生成图像序列 Lottie：Lottie 兼容包中的真实帧。对于矢量输出，从矢量图稿重建动画。
为什么我的 Lottie ZIP 比 MP4 大很多？
视频编解码器主要存储帧之间的差异，而图像序列则存储每一帧。我们的 104,074 字节贴纸 MP4 变成了 918,089 字节作为 Lottie ZIP。减少持续时间和帧速率来降低它。
我应该使用什么帧速率？
运动允许的最低值。贴纸和 UI 过渡通常适用于 12 至 15 fps；快速运动需要24或更多。将帧速率减半大约会使文件减半。
视频上传了吗？
不需要。解码、键控和编码在您的浏览器中运行。只有可选的云同步或共享链接才会上传您选择的结果。
我应该使用 WebM 吗？
两种格式都要实测。9 月测试的纯色素材中，WebM 约为 Lottie ZIP 体积的十分之一；10 月测试的渐变贴纸中，WebM 却大了 32%。如果应用已经支持 Lottie 播放，并且需要像控制其他动画一样控制这段素材，可以使用 Lottie。
主要来源
根据下面的原始运行时或格式文档检查了技术行为。