
动画更轻量!我的 Lottie 文件优化秘籍
分享 Lottie 动画优化流程,亲测可将文件体积压缩至原始大小的 40% 左右甚至更小 📉,让动画更轻量 ⚡,加载更快,提升 App 丝滑体验 🎨!
为了更好地演示 Zipic 的功能,我用 LottieLab 制作了一些 Lottie 动画。更新到 v1.8 的朋友应该已经看到了,效果还不错吧?🎉
不过如果每次都依赖在线资源,既受网络限制又增加加载不确定性,所以我决定把动画直接集成到 App 里。但随之而来的问题是:文件不能太大! 于是我研究出一套优化工作流,现在分享给大家,希望能帮到你。💡
前言
我使用的是 LottieLab 设计动画,所以本文就以它为例。
在研究的过程中发现:虽然 LottieLab 自带的优化已经很好了,但一些开源工具还能在此基础上再优化(压缩)一波,于是我整理出了以下工作流:
LottieLab 发布并优化 → 下载优化后的 Lottie 文件 → 本地优化
举个例子:
我的设计文件 Feature4_light,原始下载大小 234.6 KB,经过完整流程优化后,最终只剩下 94.6 KB。✨
LottieLab 发布&优化
- 点击 Export 按钮,会弹出导出窗口
- 在左侧选择 Lottie
- 点击 Publish version to links,等待优化完成
- 在 Lottie Embed options 中找到 JSON URL
- 点击 Copy link,复制链接
下载 Lottie 文件
把复制的链接粘贴到浏览器,打开页面,点击 Decompress & download,就能把优化过的 Lottie JSON 文件保存到本地。
本地优化
这一步我们用 LottieGo 来进一步优化 👉 https://lottiego.com
直接拖拽文件到页面,就能马上得到更小的结果。
如果你是 macOS 用户,还可以用 LottieGo 的桌面客户端,体验更流畅:
小结 & 一点小私心
以上就是我在使用 Lottie 动画时的完整优化流程,希望能帮到你让 App 动画更轻量!🙌
最后,想顺便介绍一下我自己开发的工具 LottieGo。
起初是因为市面上的一些 Lottie 优化工具用起来不是很理想(要么效果不佳,要么体验不友好😅),所以干脆自己撸了一个。现在它已经可以轻松完成二次优化,未来我计划让它逐渐实现接近 LottieLab 的完整功能,并且额外支持 导出视频/GIF —— 这样就不用在 LottieLab 里绕来绕去啦。🚀
慢慢迭代,但方向明确,希望它能成为你日常动效处理的小帮手!

