EasyLottie指南
如何替换 Lottie 动画中的图像
交换 Lottie 文件内的嵌入图像,同时保持原始定时、运动和导出格式不变。


为什么图像替换很重要
许多 Lottie 动画是矢量形状和光栅图像资源的混合。产品屏幕截图、徽标、头像、图标和纹理插图通常作为图像存储在包内。如果您有合适的工具,这使得动画可以轻松自定义,但如果您只有最终的 JSON,则会令人沮丧。
旧的工作流程是要求动作设计师重新打开 After Effects,替换资源,然后再次导出。这需要源项目和创建它的人。 Lottie 图像替换工作流程使营销人员、创始人、开发人员或本地化经理可以直接从交付的文件中进行更改。
如何替换 Lottie 文件中的图像
将 Lottie JSON 或 ZIP 上传到 EasyLottie 图像替换。如果文件是 ZIP,该工具将解析引用的资源并将其显示为可编辑资源。如果图像直接嵌入到 JSON 中,该工具也会检测到这些图像。
从资源列表或预览中选择要替换的图像。上传新的 PNG、JPG、JPEG 或 WebP。然后调整适合、缩放、裁剪和偏移,直到替换内容自然地位于原始动画中。
导出前预览动画。时间和动作应保持不变;只有所选的视觉资产应该不同。对于简单的嵌入文件,导出 JSON;当外部图像资源需要与动画一起传输时,导出 ZIP。
良好的替换资源使编辑更容易
尽可能匹配原始图像的长宽比。将方形徽标放入宽屏幕截图框架中将需要缩放和裁剪。透明 PNG 通常最适合徽标和图标,而 JPG 或 WebP 则适合全帧照片。
使用至少与原始资源一样大的图像。放大动画中的小屏幕截图通常会产生模糊。如果原始动画有细微的运动模糊或阴影,请以播放速度检查结果,而不是仅判断静止帧。
Lottie 资产替换的用例
图像替换对于本地化教程动画、重新设计 UI 后更新产品屏幕截图、使用客户徽标对模板进行白色标记、替换占位符头像或在不触及动画时间线的情况下刷新活动视觉效果非常有用。
它对于隐私敏感的工作也很有帮助。由于文件是在本地处理的,因此未发布的屏幕截图和客户端资产不需要上传到第三方转换服务。
快速清单
- 当JSON引用外部图像时,使用ZIP。
- 在上传替换之前选择确切的资产。
- 尽可能匹配宽高比和分辨率。
- 预览运动,而不仅仅是静止帧。
- 导出 ZIP 以获得包含图像资源的完整包。
验证结果:什么必须保持不变
仅当选定的视觉效果发生变化并且动画合同保持不变时,图像替换才会成功。因此,测试是对包路径、画布和时序元数据、资源尺寸、透明度和播放的前后比较,而不是一帧的视觉浏览。
| 检查 | 更换前 | 更换后 |
|---|---|---|
| 动画时序 | 原始帧率和帧范围 | 完全相同的值 |
| 资产参考 | 现有资产 ID 和预期文件夹 | 参考解析为新图像 |
| 适合 | 原始裁剪和放置 | 有意裁剪,无拉伸 |
| 透明度 | 资产的预期阿尔法 | 无遮光盒或亮边光晕 |
| 包播放 | 所有场景和图层均渲染 | 所有场景渲染时仅更改所选图像 |
匹配的纵横比可减少所需的裁剪和偏移校正量。匹配像素尺寸很有用,但可见的拟合取决于动画应用的变换和遮罩。
导出的文件必须作为包进行测试。当构建管道移动 JSON 但忽略或识别其图像文件夹时,编辑器内的预览可能仍与部署不同。
了解极限
- 替换图像不会重新绘制动画、更改其蒙版或修复针对不同纵横比设计的合成。
- 即使源图像显示在动画的小区域中,较大的源图像也会增加包重量和内存使用量。
- 某些运行时以不同的方式解析外部资源路径。正确预览的包在捆绑、CDN 上传或本机应用程序打包后仍必须进行测试。
如果你的结果不同
- 1.恢复原来的包并确认它仍然可以播放。这将预先存在的中断切换与替换问题区分开来。
- 2.匹配替换的宽高比,然后在增加分辨率或更改动画画布之前调整适合和偏移。
- 3.当运行时依赖外部路径时,保留预期的文件夹结构和文件扩展名。
- 4.在干净的会话中预览导出的 JSON 或 ZIP,然后测试确切部署的 URL 或本机捆绑包。
常见问题
我可以替换 Lottie 动画中的徽标吗?
是的,如果徽标存储为图像资源。在图像替换中选择它,上传新徽标,然后导出。
如果没有 After Effects 源文件,这是否可以工作?
是的。 EasyLottie 可通过提供的 Lottie、JSON 或 ZIP 软件包进行工作。
我可以替换矢量路径吗?
图像替换适用于光栅图像资源。矢量路径编辑属于运动设计工具。
我应该导出 JSON 还是 ZIP?
对于简单的嵌入文件使用 JSON,当动画引用外部图像资源时使用 ZIP。
主要来源
根据下面的原始运行时或格式文档检查了技术行为。