oLoveTools
100% 在浏览器中运行

Lottie 播放器、配色编辑器与优化器,全部本地运行

打开 .lottie、.tgs 和 .json 动画,重新配置每个填充、描边和渐变色标,检查在其他播放器上会出问题的地方,并导出为 JSON、SVG、PNG、序列帧或 WebM——全部在浏览器中完成。

.json.lottie.tgs.json.gz
Lottie 文件
拖入 Lottie 文件,或点击选择.json · .lottie · .tgs · .json.gz
示例动画
检查器

打开一个动画即可查看它的结构。

工作流程

1

拖入文件

原始 .json、.lottie 压缩包、Telegram 的 .tgs 贴纸,或者压缩过的 .json.gz。什么都不会上传。

2

先看报告

在渲染之前,你就能看到体积、图层数量,以及在 iOS、Android 或老播放器上会出问题的清单。

3

改色并裁剪

每一处填充、描边、渐变色标和颜色关键帧都会变成一个色块。可以隐藏图层、裁剪范围、覆盖帧率。

4

导出或继续

JSON、.lottie、SVG、PNG、编号的序列帧或 WebM 视频;也可以把结果直接送到套件里的另一个工具。

什么都不会离开你的电脑

播放器、配色编辑器、优化器和所有导出都跑在你自己的 CPU 上。不上传、不注册、不排队——拔掉网线也照样能用。

别的查看器找不到的颜色

大多数在线查看器只能找到静态填充。这个还会识别描边、渐变色标、纯色层和动画颜色关键帧,并告诉你每种颜色被用了多少次。

一棵真正的图层树

每个顶层图层都列出类型、表达式和轨道遮罩,还有开关可以隐藏你不想要的图层。之后还能把它们从导出文件里彻底删掉。

一个把账算给你看的优化器

把导出时写成十五位的坐标取整、去掉作者元数据、删除隐藏图层,通常就能让文件小一半。你看到的是前后的实际字节数,而不是一句承诺。

图片与视频导出

当前帧导出为 PNG 或 SVG,整段范围导出为 ZIP 里的编号 PNG 序列,或者一段逐帧精确的 WebM 视频。全部在本标签页的 canvas 上渲染。

一份兼容性报告

表达式、路径合并、图层特效、文本图层、3D 标记以及通过 URL 引用的图片——正是这些东西让动画在这里好看、在手机上出错。

Lottie 查看器

这是真正在渲染的播放器,不是从远端拉取的预览

动画由运行在本页面上的 lottie-web 渲染,按文档自身的帧率播放,支持逐帧精确拖动和真正的走带控制:一帧一帧地走、倒放、裁剪范围、覆盖帧率。渲染器就在本地,所以既没有上传等待,也没有预览服务强加的画质上限。

打开一个 Lottie 动画,看清它里面究竟有什么,重新配色,去掉多余的体积,再导出成你真正需要的格式——完全不用上传给任何人。

为把动画真正上线而做,而不只是看看

设计师交来一个 900 KB、在 Android 上会出问题的 Lottie。这个工具会在你上线之前告诉你原因,让你不用回 After Effects 就能把它改成品牌色,清掉导出时残留的隐藏图层,并把文件以 JSON、.lottie、SVG、PNG、序列帧或 WebM 的形式交还给你。

既不上传,也不外部拉取

一切都在这个标签页里完成。工具还会标出那些通过 URL 引用图片的动画——这是 Lottie 唯一不自包含的情况——并在它们随 .lottie 压缩包到来时替你内嵌进去。

常见问题

Q我的动画会被上传吗?+

不会。文件通过浏览器自带的 File API 读取,在内存中处理,由随本页面一起打包的播放器渲染。整个过程没有任何服务器请求,两次访问之间也不会保存任何东西。

Q可以打开哪些文件格式?+

原始 .json 的 Lottie、.lottie 压缩包(lottiefiles.com 默认给你的格式)、Telegram 的 .tgs 贴纸,以及压缩过的 .json.gz。容器类型按内容识别,所以名字起错的文件照样能打开。

Q为什么拖进文件后没有立刻播放?+

这是刻意的。拖入只做解析和检查:你先拿到它的体积、结构和兼容性报告,按下按钮播放器才启动。如果你想完全跳过这一步,手动粘贴 JSON,它会立即打开。

Q到底哪些颜色能改?+

静态的填充和描边、填充或描边渐变的每一个色标、纯色层的颜色,以及动画颜色属性的每一个关键帧。已经烘焙进内嵌 PNG 里的颜色,或者由图层特效生成的颜色改不了——不重画素材的话,任何编辑器都做不到。

Q优化器能把文件缩小多少?+

完全取决于源文件,所以这个工具展示的是前后真实的字节数,而不是抛一个数字给你。刚从 After Effects 导出的文件,保留两位小数通常能小 40-60%,因为它们的体积几乎全是写成十五位有效数字的坐标。

Q能导出 GIF 吗?+

不能直接导出,这是有意为之:浏览器里的 GIF 编码器会把矢量动画的颜色压成色阶断层。请改为导出编号的 PNG 序列或 WebM——两者都保留完整调色板,任何编码器都能无损地把它们转成 GIF。

Q改颜色会不会破坏动画?+

不会。每一次编辑都以补丁的形式存放在原始文档之上,原文档从不被修改。你随时可以撤销、重做、重置调色板,或者按住“对比”查看未经改动的文件。

关键词

Lottie 查看器在线 Lottie 播放器编辑 Lottie 颜色dotLottietgs 查看器Lottie 优化Lottie 转 WebMLottie 转 PNG 序列Lottie 兼容性检查After Effects Bodymovin
oLoveTools 工具套件的一部分
oLoveTools

一个在本地运行的 Lottie 播放器、配色编辑器、优化器和导出工具。

© 2026 oLoveTools关于

Lottie Viewer | 免费在线 Lottie 播放器、编辑器与优化器

打开 .lottie、.tgs 和 .json 动画,重新配置填充、描边和渐变,检查各播放器之间的兼容性,并导出为 SVG、PNG、序列帧或 WebM。100% 在浏览器中完成。

常见问题

我的动画会被上传吗?

不会。文件通过浏览器自带的 File API 读取,在内存中处理,由随本页面一起打包的播放器渲染。整个过程没有任何服务器请求,两次访问之间也不会保存任何东西。

可以打开哪些文件格式?

原始 .json 的 Lottie、.lottie 压缩包(lottiefiles.com 默认给你的格式)、Telegram 的 .tgs 贴纸,以及压缩过的 .json.gz。容器类型按内容识别,所以名字起错的文件照样能打开。

为什么拖进文件后没有立刻播放?

这是刻意的。拖入只做解析和检查:你先拿到它的体积、结构和兼容性报告,按下按钮播放器才启动。如果你想完全跳过这一步,手动粘贴 JSON,它会立即打开。

到底哪些颜色能改?

静态的填充和描边、填充或描边渐变的每一个色标、纯色层的颜色,以及动画颜色属性的每一个关键帧。已经烘焙进内嵌 PNG 里的颜色,或者由图层特效生成的颜色改不了——不重画素材的话,任何编辑器都做不到。

优化器能把文件缩小多少?

完全取决于源文件,所以这个工具展示的是前后真实的字节数,而不是抛一个数字给你。刚从 After Effects 导出的文件,保留两位小数通常能小 40-60%,因为它们的体积几乎全是写成十五位有效数字的坐标。

能导出 GIF 吗?

不能直接导出,这是有意为之:浏览器里的 GIF 编码器会把矢量动画的颜色压成色阶断层。请改为导出编号的 PNG 序列或 WebM——两者都保留完整调色板,任何编码器都能无损地把它们转成 GIF。

改颜色会不会破坏动画?

不会。每一次编辑都以补丁的形式存放在原始文档之上,原文档从不被修改。你随时可以撤销、重做、重置调色板,或者按住“对比”查看未经改动的文件。

关键词

Lottie 查看器, 在线 Lottie 播放器, 编辑 Lottie 颜色, dotLottie, tgs 查看器, Lottie 优化, Lottie 转 WebM, Lottie 转 PNG 序列, Lottie 兼容性检查, After Effects Bodymovin