Lottie 使用指南：预览、换色、素材编辑与格式转换
Lottie 适合 Web、App、小程序等 UI 动效场景。MotionTools 可以预览 Lottie、查看文件信息、替换图片素材、批量处理图片、替换颜色和渐变、添加水印，并输出为多种交付格式。
先给结论
- 需要保留 JSON 结构、矢量动效和运行时控制时，优先保持 Lottie 或 DotLottie 输出。
- 文件过大时先检查内嵌图片和画布尺寸；压缩 JSON 文本通常不是唯一答案。
- 转为 MP4、GIF、WebP 或其他视频和动图格式后，只保留渲染画面，不再保留 Lottie 图层编辑能力。
- 不同 Lottie 渲染器支持的效果不同，渐变、蒙版、表达式和图片替换都应在目标端复测。
Lottie 预览与编辑演示
画面说明：画面展示 Lottie 文件加载后的动画预览、播放进度与编辑区域，并切换查看图片素材、颜色和渐变等可编辑内容。视频无旁白、无音频。
一、预览与文件信息
上传 .json Lottie 文件后，MotionTools 会展示基础信息，方便先判断文件是否适合当前场景。
| 信息 | 能做什么 |
|---|---|
| 格式识别 | 判断文件是否为有效 Lottie 动画。 |
| 画布尺寸 | 确认是否适合目标页面、组件或图标区域。 |
| 文件大小 | 判断是否需要压缩或转成更轻格式。 |
| 时长 | 判断动画节奏是否过长或过短。 |
| 帧数与帧率 | 判断播放流畅度和节奏。 |
| 图片素材 | 查看文件里是否包含可替换图片。 |
| 水印识别 | 如果文件带有明显水印信息，可以辅助判断是否需要处理。 |
预览区支持：
| 能力 | 用户收益 |
|---|---|
| 自动播放 | 上传后直接查看动效。 |
| 播放 / 暂停 | 检查动画状态和关键画面。 |
| 时间轴拖动 | 定位到指定画面，检查细节。 |
| 点击选中元素 | 配合颜色和渐变面板，快速定位需要调整的视觉元素。 |
二、颜色与渐变替换
Lottie 的颜色面板适合处理品牌换色、活动换肤、深浅色适配等需求。
| 功能 | 能做什么 | 适合场景 |
|---|---|---|
| 颜色扫描 | 找出动画中可替换的颜色。 | 品牌色调整、活动主题换色。 |
| 单个颜色替换 | 修改选中的颜色。 | 只改某个按钮、图标或装饰色。 |
| 相同颜色批量替换 | 一次替换所有相同颜色。 | 保持整套视觉统一。 |
| 渐变扫描 | 找出动画中的渐变样式。 | 活动背景、光效、装饰层换色。 |
| 渐变替换 | 修改渐变中的颜色组合。 | 快速适配不同视觉主题。 |
这些操作适合在不回到设计源文件的情况下，快速生成不同主题的 Lottie 版本。
三、图片素材编辑
如果 Lottie 文件包含图片素材，MotionTools 会在素材区展示这些图片，并提供替换、删除、重命名、批量处理和下载能力。
| 功能 | 能做什么 | 适合场景 |
|---|---|---|
| 替换图片 | 用本地图片替换当前素材。 | 头像、贴纸、品牌图、活动图。 |
| 删除图片 | 移除不需要的素材。 | 清理冗余图片或生成简化版本。 |
| 重命名图片 | 修改素材名称。 | 方便交付和后续协作。 |
| 批量替换 | 一次处理多张图片。 | 多头像、多奖品、多活动图版本。 |
| 批量删除 / 重命名 | 集中整理图片资源。 | 素材量较多时减少重复操作。 |
| 下载全部素材 | 将图片素材打包下载。 | 备份、检查或交给其他同事处理。 |
Lottie 也支持添加图片水印，适合给预览稿、提审稿或保护性素材加标识。
四、格式转换
Lottie 可以输出为以下格式：
| 目标格式 | 适合什么情况 |
|---|---|
| Lottie | 保持 JSON 动效交付，同时调整尺寸、素材或颜色。 |
| DotLottie | 需要 .lottie 封装文件的场景。 |
| PNG 序列帧 ZIP | 交给设计、视频或其他工具继续处理每一帧画面。 |
| PAG | 需要交付 PAG 播放链路时使用。 |
| MOV | 部分设计、剪辑或视频工作流需要 MOV 文件时使用。 |
| WebM | Web 页面中使用视频动效或透明视频时使用。 |
| GIF | 聊天、运营、预览等兼容性优先的场景。 |
| WebP | 网页、运营位或轻量预览中使用动图。 |
| APNG | 需要透明动图，并且目标环境支持 APNG。 |
| VAP | 需要交付 VAP 播放链路时使用。 |
| YYEVA | 需要交付 YYEVA 播放链路时使用。 |
| 双通道 | 需要透明效果，同时希望以 MP4 文件交付时使用。 |
| MP4 | 普通视频播放、社媒投放或不需要透明背景的场景。 |
Lottie 转 PAG 支持两种方式：一种更适合保留结构，另一种更接近最终画面。可以根据实际视觉效果选择。
五、尺寸、压缩与镜像
导出前可以调整 Lottie 输出效果。
| 设置 | 能做什么 | 适合场景 |
|---|---|---|
| 调整宽度 / 高度 | 按比例改变输出尺寸。 | 同一动画适配不同组件或页面位置。 |
| 图片资源压缩 | 减小包含图片的 Lottie 文件体积。 | 加快加载，降低分发成本。 |
| 左右镜像 | 生成水平方向相反的版本。 | 同一动效适配左右布局。 |
| 上下镜像 | 生成垂直方向相反的版本。 | 特殊视觉或不同摆放方向。 |
| 双向镜像 | 同时应用左右和上下镜像。 | 快速生成反向版本。 |
| 转换结果预览 | 输出后先检查画面和文件信息。 | 降低返工概率。 |
六、限制与验收
- 颜色和渐变编辑只对当前解析器能够识别的属性生效，复杂表达式或渲染器专属效果可能无法等价处理。
- 图片压缩只影响可识别的图片资源；纯矢量文件应优先检查图层复杂度、画布和帧率。
- MP4 输出为普通视频交付路径，不保留透明 Alpha；透明交付应改用目标端支持的透明方案。
- 输出后应检查首尾帧、循环点、渐变、蒙版、文字、图片、透明背景和目标渲染器一致性。
动效批量转换
多个 Lottie 可批量转为 MP4 等支持格式，统一设置可用参数，再检查背景和画面。需要修改颜色、图片或补齐资源时先完成单次编辑；跨格式转换不承诺保留矢量图层，多动画 DotLottie 包需要先拆分。
查看 动效批量转换指南，了解多格式、多方案、PRO 计次与文件限制。
相关内容
能力核对日期：2026-09-10。页面只描述当前代码和界面中可验证的能力；不同 Lottie 渲染器的最终效果仍需在目标端复测。