Lottie 播放器、配色编辑器与优化器,全部本地运行
打开 .lottie、.tgs 和 .json 动画,重新配置每个填充、描边和渐变色标,检查在其他播放器上会出问题的地方,并导出为 JSON、SVG、PNG、序列帧或 WebM——全部在浏览器中完成。
打开一个动画即可查看它的结构。
工作流程
拖入文件
原始 .json、.lottie 压缩包、Telegram 的 .tgs 贴纸,或者压缩过的 .json.gz。什么都不会上传。
先看报告
在渲染之前,你就能看到体积、图层数量,以及在 iOS、Android 或老播放器上会出问题的清单。
改色并裁剪
每一处填充、描边、渐变色标和颜色关键帧都会变成一个色块。可以隐藏图层、裁剪范围、覆盖帧率。
导出或继续
JSON、.lottie、SVG、PNG、编号的序列帧或 WebM 视频;也可以把结果直接送到套件里的另一个工具。
什么都不会离开你的电脑
播放器、配色编辑器、优化器和所有导出都跑在你自己的 CPU 上。不上传、不注册、不排队——拔掉网线也照样能用。
别的查看器找不到的颜色
大多数在线查看器只能找到静态填充。这个还会识别描边、渐变色标、纯色层和动画颜色关键帧,并告诉你每种颜色被用了多少次。
一棵真正的图层树
每个顶层图层都列出类型、表达式和轨道遮罩,还有开关可以隐藏你不想要的图层。之后还能把它们从导出文件里彻底删掉。
一个把账算给你看的优化器
把导出时写成十五位的坐标取整、去掉作者元数据、删除隐藏图层,通常就能让文件小一半。你看到的是前后的实际字节数,而不是一句承诺。
图片与视频导出
当前帧导出为 PNG 或 SVG,整段范围导出为 ZIP 里的编号 PNG 序列,或者一段逐帧精确的 WebM 视频。全部在本标签页的 canvas 上渲染。
一份兼容性报告
表达式、路径合并、图层特效、文本图层、3D 标记以及通过 URL 引用的图片——正是这些东西让动画在这里好看、在手机上出错。
这是真正在渲染的播放器,不是从远端拉取的预览
动画由运行在本页面上的 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改颜色会不会破坏动画?+
不会。每一次编辑都以补丁的形式存放在原始文档之上,原文档从不被修改。你随时可以撤销、重做、重置调色板,或者按住“对比”查看未经改动的文件。