EasyLottie指南
在浏览器中编辑和转换 Lottie 的免费方法
针对日常 Lottie 作业的免费本地浏览器工具的测试演练，其中包含每个工具的测量结果以及您在依赖它们之前应该了解的限制。
人们真正需要 Lottie 编辑器做什么
大多数 Lottie 编辑都很小。颜色不符合品牌、徽标或屏幕截图陈旧、文件太重，或者需要成为无法播放动画的频道的 GIF。这些是交付工作，而不是动作设计，而且它们通常在没有原始项目文件的情况下到达。
EasyLottie 是一组免费的单一用途浏览器工具，适用于这些工作。核心工具在本地运行：在浏览器中读取和处理文件，并且不上传任何内容。没有帐户要求，没有水印，也没有付费等级。
按工作选择工具
每个任务都有一个专用工具。该表列出了每个项目的作用及其产生的结果。
| 如果您需要 | 使用 | 输出 |
|---|---|---|
| 播放、检查或测试 Lottie、ZIP 或 .lottie | Lottie 预览 | 播放及文件详细信息 |
| 重新着色动画 | 换色器 | 已编辑 JSON 或 ZIP |
| 替换徽标、屏幕截图或图像 | 图像替换 | 已编辑 JSON 或 ZIP |
| 使文件变小 | Lottie压缩机 | 优化JSON |
| 将 Lottie 变成 GIF | Lottie 至 GIF | 动画GIF |
| 将 MP4、MOV、WebM 或 GIF 转换为 Lottie | MP4 至 Lottie | Lottie ZIP、GIF、WebM 或 PNG 框架 |
| 将 Figma 动画转换为 Lottie | Figma 至 Lottie | 矢量Lottie |
| 重新着色动画 SVG | SVG 改色 | 重新着色SVG |
首先预览和检查
启动查看器中的每项作业。它播放 JSON、ZIP 和 .lottie 文件，并显示帧速率、持续时间、尺寸、版本和包内的文件。通过我们的brand-badge.lottie，它在a/brand-badge.json处找到了动画，并报告了30 fps、3.00秒和400 400像素。在编辑之前了解这些数字可以避免以后出现意外，例如画布远远大于其显示槽。
重新着色和替换图像
颜色变换器列出了每种纯色的使用次数，并允许您在动画播放时交换它。在我们的测试中，交换徽章的六种颜色中的两种只会更改导出中的六个数字，而不会更改任何其他内容。图像替换按缩略图、像素大小和字节大小列出嵌入的位图，以便您可以准确地看到要交换的内容。匹配原始宽高比，并使新图像接近原始像素大小，以避免文件膨胀。
压缩和转换
压缩器首先显示字节的去向：动画结构、嵌入图像、字体和其他资源。其安全模式会删除格式，删除没有图层使用的图像资源，并合并字节相同的图像。在我们臃肿的产品卡上，将下载从 119,611 字节转换为 38,869 字节，而播放效果不变。
Lottie 到 GIF 渲染每一帧并在本地编码 GIF。有两件事需要知道。首先，GIF计时以百分之一秒为单位存储，因此30 fps变成33.3 fps，循环变短； 25 或 50 fps 保持准确。其次，GIF很大：我们的6.8 KB徽章在480像素处变成了824 KB GIF。将其用于电子邮件、聊天和自述文件，而不是用于可以运行播放器的网页。
为什么本地处理很重要
许多免费的在线工具将您的文件上传到服务器以进行处理。 EasyLottie 的核心工具不会：解析、编辑、压缩和 GIF 编码在浏览器选项卡中运行。这样可以将客户工作和未发布的产品屏幕保留在您的设备上，避免上传队列，并且意味着没有每个计划的文件大小限制。服务器功能是可选的并标记为：云同步、共享链接和 AI 生成器。
当您仍然需要运动工具时
如果您需要更改运动本身，例如重新定时、重新缓动、添加动画元素或从头开始构建动画，请使用 After Effects 或其他创作工具。浏览器工具适用于运动已经正确的文件。对于“动画很好，我只需要更改一件事”的常见情况，它们比重新打开项目更快。
快速清单
- 首先预览文件并记下其帧速率、大小和资源。
- 使用换色器为品牌或深色模式变体重新着色。
- 以原始宽高比替换过时的徽标和屏幕截图。
- 发货前压缩，尤其是编辑后。
- 仅在 Lottie 无法播放的情况下导出 GIF，在 25 或 50 fps 上进行精确计时。
重现工作流程
使用这些本地示例文件重复本指南中描述的检查。在生产项目中使用该文件之前请先检查该文件。
测试结果：五个作业，五个真实文件
我们在 2026-10-11 上的桌面 macOS 上的 Chrome 中的已知示例上运行每个工具，下载真实输出，并在浏览器外检查它。上面提供了这些文件，因此可以重现结果。
| 工作和投入 | 工具 | 测量结果 |
|---|---|---|
| 检查 brand-badge.lottie | Lottie 预览 | 找到/brand-badge.json； 30 fps、3.00、400×400 |
| 改色 brand-badge.json | 换色器 | 找到 6 颜色； 2 已交换，仅 6 号码发生变化 |
| 在产品卡中查找图像.json | 图像替换 | 1 上线资产：300×180、26.8 KB |
| 收缩产品-卡-臃肿.json | Lottie压缩机 | 119,611 至 38,869 字节；已删除 3 图像资源的 2 |
| 出口品牌-徽章.json为GIF | Lottie 至 GIF | 480×480、90 帧、823,610 字节、2.7 循环 |
压缩器删除了未引用的图像并合并了字节相同的副本。现在，两个图像层都指向剩余的一项资源，因此播放效果不变。
GIF 循环比 Lottie 短 10%。 GIF 帧延迟以百分之一秒为单位存储，因此 30 fps（3.33 百分之一）四舍五入为 3，并且 90 帧以 2.7 秒（而不是 3.0）播放。
GIF 大约是 Lottie 的 120 倍。这是正常的：GIF 存储每帧的每个像素，而 Lottie 存储形状和关键帧。仅在 Lottie 播放器无法运行的情况下使用 GIF。
了解极限
- 这些工具编辑和转换现有文件。他们不创作新的动作、添加图层或更改关键帧和缓动。
- 具有许多停止点、表达式或光栅图像的渐变内的颜色不可作为颜色值进行编辑。
- GIF 导出无法保持每个帧速率的精确计时，仅支持完全透明或完全不透明的像素，并生成更大的文件。
- 需要服务器的可选功能，例如云同步、共享链接、AI生成、上传数据。核心编辑工具则不然。
如果你的结果不同
- 1.如果某个文件在每个工具中都失败，请先在 Lottie Preview 中打开它并读取错误。大多数故障是 JSON 无效或图像文件丢失。
- 2.如果重新着色或压缩的文件看起来不正确，请在发货前将其与预览中的原始文件并排进行比较。
- 3.如果 GIF 循环不同步，请选择均匀划分 100 的帧速率，例如 25 或 50 fps，以便每次延迟都是准确的。
- 4.如果任务需要新的动作，请返回动作工具中的源项目。
常见问题
有没有一种免费方法可以在没有 After Effects 的情况下编辑 Lottie？
是的。 EasyLottie 的预览、重新着色、图像替换、压缩和 GIF 工具是免费的，可以在浏览器中运行。他们编辑现有文件；创建新的动作仍然需要动作工具。
我需要注册或付款吗？
不需要。所有工具都是免费的，没有帐户，没有水印，也没有付费等级。可选帐户仅添加云同步和共享链接。
我的文件是否上传到服务器？
核心工具在本地处理文件。只有您选择的可选功能（例如云同步、共享链接或 AI 生成）才会上传数据。
为什么我的 GIF 环路比 Lottie 短？
GIF 帧延迟使用百分之一秒，因此某些帧速率会发生变化。在 30 fps 处，每个延迟变为 3 百分之一，并且 3 秒、90 帧循环播放在 2.7 秒内。使用 25 或 50 fps 进行精确计时。
它可以编辑动作或时间吗？
不。它可以编辑颜色、图像、尺寸和格式。更改关键帧或缓动是运动设计工具的工作。
主要来源
根据下面的原始运行时或格式文档检查了技术行为。