如果你需要把动效快速落到产品里（尤其是 App/网页里的轻量动画），Lottie 生态能覆盖从制作、预览调试、压缩优化到交付联调的完整链路。下面整理一份常用工具清单，开头一段说清目标，后面直接给工具与地址，方便你按场景快速对照。
需看协议｜社区素材很多，但不同作者的授权差异大。适合做 Lottie 动画的预览、分享、嵌入演示，也能用在线编辑器做轻量修改与替换。
它的优势是生态完整：作品页可直观查看帧率、尺寸、是否可循环等信息，团队协作时拿来做“动效交付对齐页”很省沟通成本。
工具地址：https://rive.app/
需看协议｜更偏交互动效与状态机，适合做可控的 UI 动画。相比纯导出序列帧或 GIF，Rive 更适合“一个素材多状态”的组件化交付。
如果你的动效需要跟按钮状态、进度、手势联动，Rive 往往比传统时间轴动画更稳，工程接入后也更容易维护。
工具地址：https://github.com/airbnb/lottie-web
免费商用｜Lottie 的核心实现之一。用于网页端播放、调试与验证动效渲染效果，工程侧也常用它来快速验证兼容性与性能。
做交付时建议同时给工程一个最小复现页面或 json 示例，提前发现不支持的表达式、特效或混合模式，避免临近上线返工。
工具地址：https://lottiefiles.github.io/lottie-player/
免费商用｜适合在线快速预览 Lottie、切换循环与速度、测试播放控制。用它可以在不写太多代码的情况下复现“某个端表现异常”的问题。
当你要和开发对齐“触发条件、播放时机、暂停/恢复”这些交互细节时，先用可视化播放器把行为跑通，会比口头描述准确很多。
工具地址：https://lottiefiles.com/editor
需看协议｜适合做轻量编辑：替换颜色、裁剪画布、调整图层与关键帧等。对于“已有 json 但需要改一点点”的场景，比重新回 AE 改更快。
建议把可复用的动效做成模板文件，并在编辑器里统一输出尺寸与命名规范，交付时更利于版本管理与回溯。
工具地址：https://github.com/svga/SVGAPlayer-Web
免费商用｜另一种常见动画格式与播放器方案，适合部分业务动效、运营动效展示。对某些复杂矢量或位图混合的表现更友好。
如果你团队已经有 SVGA 的技术栈，设计侧就要更关注导出规范、透明通道、资源大小与缓存策略，避免上线后性能抖动。
需看协议｜偏“快速做社媒/产品演示动效”的在线工具。适合快速拼字、转场、节奏动画，做出可交付的演示视频或短片素材。
当你需要在半天内做出多套版本给产品/运营选型，Jitter 的上手速度会比传统软件更高，适合作为“验证方向”的快工具。
工具地址：https://www.figma.com/community/plugin/
需看协议｜Figma 社区里有多种 Lottie 相关插件（预览/导出/转换），具体能力取决于插件作者。适合把动效评审和设计稿协作放在同一个平台里。
使用前建议先用一两个标准案例测试：文字图层、蒙版、渐变、混合模式是否会丢失；确认后再作为团队流程的一部分。
工具地址：https://www.adobe.com/products/aftereffects.html
需看协议｜动效制作的“主战场”。如果你要做更复杂的节奏、镜头、粒子与合成，AE 依然是最稳的选择；再配合导出工具进入 Lottie 交付链路。
建议建立项目模板：统一分辨率、帧率、命名、合成层级与导出检查表，把“可导出”作为设计约束而不是交付后补救。
工具地址：https://github.com/airbnb/lottie-android
免费商用｜Android 端的 Lottie 播放库。设计交付时可用它的文档来反向检查：哪些特效支持、哪些表达式不稳定、哪些渲染会有差异。
如果动画用于关键路径（如下单、支付、登录），建议额外准备降级方案：静态图或短视频，确保低端机也不影响流程。
工具地址：https://github.com/airbnb/lottie-ios
免费商用｜iOS 端的 Lottie 播放库。适合用来核对渲染一致性、内存开销与启动时机。对交付来说，提前了解限制比事后返工更省。
建议在交付文件里写清：播放次数、循环方式、触发事件、是否可中断、是否跟随系统深色模式等关键约束。
工具地址：https://github.com/airbnb/lottie
免费商用｜面向设计与开发协作的工具/组件集合。适合把 Lottie 动画放进可复用的组件体系里，做统一的交互封装与版本管理。
当你有“同一套动效需要在多个页面复用”的需求时，优先把动效资产做成组件并集中管理，能显著降低后续迭代成本。
工具地址：https://squoosh.app/
免费商用｜虽然它不是 Lottie 专用，但在交付链路里很常用：压缩动效用到的位图资源、测试不同编码与质量对体积的影响。
当 Lottie 文件里包含位图（或导出方案混合位图）时，先把位图资源瘦身再交付，往往比只优化 json 更立竿见影。
工具地址：https://www.webpagetest.org/
需看协议｜用于性能评估。动效上线后真正影响体验的是加载、解码与首帧时间，而不是“看起来很酷”。用性能工具量化，才能决定是否需要降级。
建议把动效当作资源的一部分纳入性能预算：体积上限、首屏加载策略、缓存策略、弱网兜底，这些比单纯追求炫更重要。
