EasyLottie指南
如何在没有 After Effects 的情况下编辑 Lottie 动画
您可以在浏览器中安全地进行 Lottie 编辑的经过测试的地图，其中每个编辑在 JSON 中实际更改的内容以及仍然属于运动工具的编辑。
从您实际需要的编辑开始
After Effects 非常适合从头开始创建运动，但开发人员收到的大多数 Lottie 请求都小于此要求。品牌颜色发生了变化。入门动画中的屏幕截图已过时。装载机对于捆绑物来说太重了。营销部门需要 GIF 来处理无法运行播放器的电子邮件。这些都不需要新的动作，而且许多团队无论如何都不再拥有原始的 .aep 项目。
Lottie 文件是 JSON。颜色是数字数组，嵌入图像是 base64 字符串，计时是帧速率加上输入和输出点。仅更改这些存储值的编辑在运动工具外部进行是安全的。需要新关键帧、新形状或新图层的编辑则不需要，因为文件中还没有任何需要更改的内容。
哪些编辑在浏览器中有效
下表将常见请求映射到它们在文件中涉及的内容以及处理它们的工具。本指南的每一行都针对真实文件进行了测试；测量结果见以下部分。
| 请求 | JSON 有哪些变化 | 在哪里做 |
|---|---|---|
| 检查文件是否播放、循环并拥有其资源 | 什么都没有，只读 | Lottie 预览 |
| 交换品牌颜色或制作深色模式变体 | 填充、描边、渐变中的颜色数组 | 换色器 |
| 替换徽标、屏幕截图或插图 | 图像资源中的 Base64 数据 | 图像替换 |
| 减小文件大小 | 格式化、重复或未使用的资源、图像编码 | Lottie压缩机 |
| 制作 GIF 用于电子邮件、聊天或自述文件 | 什么都没有；帧被渲染到新文件中 | Lottie 至 GIF |
| 更改现有循环的速度 | 播放设置或文件中的帧速率 | 预览速度控制，或播放器的速度选项 |
| 重新定时、重新缓动或添加元素 | 新的关键帧、形状或图层 | After Effects或其他运动工具 |
不接触运动即可重新着色
打开换色器并放入 JSON 或 ZIP。该工具会遍历文件，收集在填充和描边中找到的每种纯色，并列出每种颜色的使用次数。选择要更改的样本，输入新值并应用。预览会持续播放，因此您可以判断真实动画而不是调色板芯片上的对比度。
在我们使用brand-badge.json进行的测试中，导出的数据与原始数据的不同之处正好有六个数字：我们交换的两种颜色的通道。其他一切都没有改变。这是在任何浏览器编辑器中查找的属性。如果一个工具通过自己的模型重新导出整个动画，关键帧中的小舍入变化可能会悄悄出现，并且在循环开始卡顿之前很难发现这些变化。
替换动画中的图像
许多营销和入门动画都是围绕嵌入式位图构建的：产品屏幕截图、徽标、头像。在 JSON 中，它们作为 base64 数据位于资产数组中，由图像层引用。图像替换列出了每个图像资源及其像素大小和字节大小。我们的产品卡示例显示了一项资产，img_0.png，位于 300，由 180 像素和 26.8 KB 组成。
替换资源会保留图层、其位置、比例和动画；新图像被绘制到同一个框中。我们的替代品是 300 尺寸相同的 180，因此它无需调整即可投入使用，并且资产仅增长到 29.8 KB。具有不同宽高比的替换需要首先进行裁剪，放入 300 像素插槽中的 2,000 像素照片在屏幕上看起来相同，但可能会向文件添加数百 KB。
- 打开图像替换并上传 JSON，如果图像是外部文件，则上传 ZIP。
- 按缩略图和大小查找资源，然后上传替换内容。
- 如果新图像需要在其框内移动或缩放，请使用微调控件。
- 导出为 JSON 或 ZIP，然后在查看器中重新加载导出以确认其播放。
缩小、预览和转换
交付问题通常与大小或格式有关，而不是与内容有关。 Lottie 压缩器会删除格式、删除没有图层引用的图像资源，并合并字节相同的图像。在我们臃肿的产品卡上，其中包含其屏幕截图的副本和未使用的副本，下载的文件从 119,611 字节变为 38,869 字节，播放效果不变。
当通道根本无法播放 Lottie 时，导出 GIF。请注意，GIF 以百分之一秒为单位存储帧延迟，因此某些帧速率无法准确表示。我们的 30 fps、90 帧徽章变成了具有 3 第一百次延迟的 GIF，它在 2.7 秒内播放循环，而不是 3.0。对于装载机来说，这很好。对于与声音同步的动画来说，情况并非如此。
何时返回After Effects
当您需要重绘形状、更改关键帧、调整缓动曲线、修改蒙版、重建合成或添加状态时，请使用运动工具。浏览器编辑器不应假装这些是简单的文件编辑，EasyLottie 也不会尝试。
高效的工作流程诚实地使用这两个类别。在创建动议的位置编写和重组动议。当交付的文件已经关闭时，在浏览器中完成最终的颜色、资源、大小和格式工作。这种分割还可以保持源项目的干净：您不必重新导出动画，也不必冒着因真正的单值更改而发生微妙漂移的风险。
快速清单
- 首先预览文件并确认它可以播放所有资源。
- 在换色器中重新着色并验证仅更改的颜色值。
- 以原始宽高比和相似像素大小替换图像。
- 如果导出的文件增大，请在编辑后进行压缩。
- 仅在 Lottie 播放器无法运行的情况下使用 GIF，并检查循环时序。
- 返回运动工具以获取任何需要新关键帧的内容。
重现工作流程
使用这些本地示例文件重复本指南中描述的检查。在生产项目中使用该文件之前请先检查该文件。
测试结果：浏览器重新着色实际改变了什么
我们将品牌徽章.json上传到换色器，将蓝色（#3B82F6）替换为#111827，将黄色（#F5C542）替换为#EC4899，导出文件，并逐个对比解析出的原始的JSON和导出的key。这显示浏览器编辑是外科手术值更改还是可能默默改变运动的重新导出。
| 检查 | brand-badge.json (原始文件) | 重新着色后导出 |
|---|---|---|
| 检测到的颜色 | 6 | 6（两个现在与其他人共享值） |
| 不同的价值观 | - | 6 数字，完全采用 2 颜色数组 |
| 关键帧、修剪路径、图层、计时 | 90 框架位于 30 fps | 相同，其他键没有改变 |
| 下载的文件大小 | 6,823 字节 | 32,680 字节（打印精美） |
| 文件大小缩小 | 6,823 字节 | 6,890 字节 |
编辑仅涉及我们更改的两种颜色的红色、绿色和蓝色通道。每个关键帧、修剪路径、图层和计时值在解析时都是相同的，这正是您希望从交付阶段编辑中获得的效果。
导出的内容打印得很漂亮，因此下载的文件大小几乎是原始文件的五倍，尽管内容几乎没有改变。如果尺寸很重要，请在发货前通过 Lottie 压缩机运行结果；缩小后，与新颜色的较长十进制值的差异为 67 字节。
了解极限
- 浏览器编辑器更改文件中已存在的值。他们无法添加图层、绘制新形状、添加关键帧或更改缓动曲线。
- 由表达式驱动、链接到效果或烘焙到嵌入光栅图像中的颜色不会存储为可编辑颜色值，因此颜色检测器不会列出它们。
- 图像替换会交换现有图像资源内的位图。它不会更改资源的图层变换，因此宽高比截然不同的替换需要首先进行拟合或裁剪。
- 在一个渲染器中正确播放的文件在 iOS、Android 或 React Native 上仍然可能有所不同。在将要发布的运行时中测试编辑后的文件。
如果你的结果不同
- 1.如果编辑似乎没有执行任何操作，请在 Lottie 查看器中重新加载导出的文件。某些应用程序通过 URL 或文件名缓存动画。
- 2.如果未检测到您可以看到的颜色，则它可能是图像、具有多个停止点的渐变或表达式。在假设该工具失败之前，请检查“图像替换”中的图像列表。
- 3.如果导出的文件比预期大，请将其压缩。大小的跳跃通常来自格式，而不是新内容。
- 4.如果更改需要新的动作，请返回源项目。不要尝试通过堆叠浏览器编辑来达到它。
常见问题
我可以在没有 After Effects 的情况下编辑 Lottie 吗？
是的，对于更改已存储在文件中的值的编辑：颜色、嵌入图像、文件大小和输出格式。我们的测试重新着色仅更改了 JSON 中的六个数字，并且每个关键帧都保持相同。
我可以更改浏览器中的时间或缓动吗？
不在 EasyLottie 中。重定时和缓动更改会创建或修改关键帧，这就是动作创作。您可以更改播放器中的播放速度，但这会均匀地缩放整个动画。
为什么我导出的文件比原始文件大？
换色器写入格式化的 JSON。我们重新着色的徽章下载时为 32,680 字节，但缩小为 6,890 字节，与原始的 6,823 字节相比。通过 Lottie 压缩器运行导出以删除格式。
浏览器Lottie编辑器是私有的吗？
EasyLottie 的编辑工具在您的浏览器中本地处理文件。除非您选择将文件保存到云工作区或创建共享链接，否则不会上传该文件。
我应该先尝试什么？
在 Lottie 预览中打开文件。如果播放后只有颜色或图像错误，请使用换色器或图像替换。如果无法播放，请在编辑任何内容之前阅读故障排除指南。
主要来源
根据下面的原始运行时或格式文档检查了技术行为。