动效资源很容易“找得到但用不起”,问题通常不在下载,而在授权、格式兼容、预览效率与二次编辑成本。下面这份清单按“先预览确认,再下载落地”的工作流整理,涵盖 Lottie 动效库、编辑器、转换与动画参考站点,便于你在不同项目阶段快速选型。
需看协议:站内资源授权与作者声明不完全一致,商用前务必逐条确认。
支持在线预览与分类检索,也能快速查看 JSON 动效在不同尺寸下的效果。
工具地址:https://iconscout.com/lottie
需看协议:不同订阅/资源可能对应不同授权范围。
适合找“界面级”小动效(按钮、提示、状态反馈),检索和筛选比较顺手。
需看协议:免费与付费方案授权范围不同。
偏产品化的图标动效库,风格统一,适合做整套 UI 动效语言。
工具地址:https://rive.app/community/
需看协议:社区资源的可商用范围以作品页说明为准。
如果你需要更复杂的交互动画(状态机/触发器),Rive 的可控性通常更强。
工具地址:https://www.lottielab.com/
需看协议:导出与团队协作功能可能涉及订阅与授权条款。
在线编辑与迭代 Lottie 的效率不错,适合把“下载的动效”快速改成自己的版本。
需看协议:导出格式、商用范围和订阅计划相关。
擅长把矢量图做成轻量动画,适合做品牌微动效与图标级动画输出。
需看协议:站点提供的动画代码用于商用时需确认许可说明。
这是 CSS 动画生成器,适合做网页端过渡与入场效果的快速原型。
工具地址:https://haikei.app/
需看协议:生成素材的使用范围以官方说明为准。
用来生成动态背景相关的 SVG 形状很方便,常用于落地页的“轻动效氛围”。
工具地址:https://undraw.co/illustrations
免费商用:官方提供较明确的免费使用说明,但仍建议按项目合规需求复核。
虽然不是动效库,但常用来做动效故事板/插画资产,配合 Lottie 输出更统一。
需看协议:部分下载/编辑能力与署名要求、订阅计划相关。
提供可编辑插画并支持动画化导出,适合做产品引导页/空状态的动态插画。
工具地址:https://github.com/airbnb/lottie-web
需看协议:开源项目也有许可证,商用一般可行但仍要遵守许可条款。
这是 Lottie 动效落地的核心实现之一,适合查兼容性、问题排查与工程接入。
工具地址:https://airbnb.io/lottie/#/
需看协议:文档站本身无问题,但项目接入仍需关注所用库的许可证与依赖。
在做交付与开发对接时,这里能快速查到平台支持与常见限制点。