Lottie 动效与交互动效制作工具清单|编辑 预览 压缩 转换 与交付

做动效原型或交互演示时,Lottie 往往是成本与效果兼顾的方案。下面这份清单按“制作-测试-优化-交付”的顺序整理,方便你在不同场景快速选到合适的工具。

LottieFiles

工具地址:https://lottiefiles.com

需看协议:提供海量动效资源、预览与分享页面,也支持上传管理、团队协作与嵌入展示(不同功能有不同授权与限制)。

Figma(配合 Lottie 插件)

工具地址:https://www.figma.com

需看协议:在设计稿阶段就能做动效预设与过渡演示,导出 Lottie 需要依赖插件与导出方案,具体以插件与项目授权为准。

Rive

工具地址:https://rive.app

需看协议:偏“可交互动效”的制作平台,适合做状态机与交互动画;与 Lottie 的定位不同,使用前建议确认导出与运行时授权。

After Effects(AE)+ Bodymovin(Lottie 导出)

工具地址:https://www.adobe.com/products/aftereffects.html

需看协议:经典制作链路,AE 负责制作,Bodymovin 负责导出 JSON;注意表达式、效果与字体等兼容性,导出前先做可用性验证。

Lottie Preview(iOS)

工具地址:https://apps.apple.com

需看协议:在真机上快速预览 Lottie JSON 的渲染效果与性能,适合在交付前做最终确认(具体 App 名称与条款以商店页面为准)。

Android Lottie(官方库)

工具地址:https://github.com/airbnb/lottie-android

需看协议:Android 端常用的 Lottie 渲染实现,便于开发侧集成与调试;使用前请查看开源协议与商用条款。

iOS Lottie(官方库)

工具地址:https://github.com/airbnb/lottie-ios

需看协议:iOS 端常用的 Lottie 渲染实现,适合用于还原与性能评估;同样建议先确认协议与三方依赖的许可。

SVGO(SVG 优化)

工具地址:https://github.com/svg/svgo

需看协议:如果你的动效里包含复杂 SVG 形状,先把源 SVG 做一次清理与优化,再进入动效制作/导出,能减少体积与渲染成本。

Lottie Web(官方库)

工具地址:https://github.com/airbnb/lottie-web

需看协议:Web 端播放与控制 Lottie 的常用方案,支持 Canvas/SVG 渲染等模式;适合做网页动效、落地页与运营活动展示。

JSON Formatter / Viewer(在线 JSON 格式化)

工具地址:https://jsonformatter.org

需看协议:用于快速查看与排查 Lottie JSON 结构(层级、资源引用、数值异常等);涉及隐私或商业文件时建议用离线工具替代。

Lottie JSON 校验与兼容性检查工具

工具地址:https://lottiefiles.com/tools

需看协议:可以对 Lottie 文件做基础校验、压缩与兼容性提示,适合在交付前做一轮“可播放/可渲染”的快速体检。

开源动效压缩/清理工具(社区脚本合集)

工具地址:https://github.com/search?q=lottie+optimizer

需看协议:有些项目会提供删除无用图层、合并路径、降采样等脚本;采用前请确认维护情况与许可协议,并用备份文件验证结果。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功