动效图标和 Lottie 动画是提升界面质感的高性价比手段：加载提示、空状态、按钮反馈、引导动效都能用上。但真正上线前，最容易踩坑的往往不是“好不好看”，而是：能否快速预览与替换颜色/尺寸、导出是否兼容你的端（Web/iOS/Android）、以及授权是否允许商用与二次编辑。下面整理 12 个常用资源与工具站点，覆盖搜索、预览、编辑到导出，并在每条开头标注商用注意事项，便于你做快速判断。
需看协议：站内资源授权分层明显，下载/商用前先看每个动画的许可说明。支持在线预览、改色、替换图层、调整速度与尺寸，很多资源可直接导出为 Lottie JSON、GIF 或 MP4。适合做“先试再用”的动效挑选与快速迭代。
工具地址：https://lordicon.com
需看协议：官方提供成套动效图标与多种触发方式（hover、loop、click），授权与订阅条款需要对照你的项目类型。优点是风格统一、交互动效成熟，上手即用。适合需要一整套“可交互”的动效图标体系时使用。
工具地址：https://rive.app/community
需看协议：社区资源需要逐个查看许可与可商用范围。Rive 强在状态机与可交互动画，适合做更复杂的微交互（例如按钮多状态、进度联动、手势反馈）。如果你不满足于单段循环动效，Rive 往往是更强的选择。
工具地址：https://iconscout.com/lottie
需看协议：资源多、分类细，但下载与商用权限常与账号/订阅相关，使用前务必核对。支持在线预览与按风格筛选，适合快速补齐某个场景动效（支付、通知、成功/失败提示等）。与其盲搜全网，不如先在这里做集中检索。
工具地址：https://www.figma.com/community
需看协议：社区文件多为作者自定义许可，商用与二次编辑要看作者说明。搜索“Lottie / Animated icons / Micro interaction”等关键词，能找到大量可编辑源文件与组件库。优势是可直接在设计稿里替换颜色/尺寸，减少“下载后再改”的折腾。
需看协议：免费/付费计划与导出能力差异较大，商用需对照订阅条款。它更像“在线版动效制作工具”：适合把静态 SVG 做成循环、缓动与路径动画，并导出适配网页的动画格式。对不想打开 After Effects 的轻量场景很友好。
工具地址：https://jitter.video
需看协议：素材与字体的商用规则需要自行确认。Jitter 偏“动效海报/社媒短片”制作，模板丰富，上手快，适合做产品发布、活动KV动效、开屏短动画。虽然不专注 Lottie，但常用于为页面补充轻量动效资产。
工具地址：https://github.com/airbnb/lottie-web
免费商用：开源项目可用于商用，但要遵循其开源许可证要求。这里是 Lottie 在 Web 端的核心运行库，配合 After Effects 的导出插件（Bodymovin）可形成完整工作流。建议把它当作“兼容性参考”：了解哪些特效会在导出/播放时失真，从源头避免踩坑。
工具地址：https://github.com/LottieFiles/lottie-player
免费商用：开源可商用，按许可证要求保留声明即可。它提供可直接嵌入网页的播放器组件，支持控制播放、循环、速度与交互事件。适合前端团队快速落地 Lottie 动效，而不是只停留在“设计稿里好看”。
工具地址：https://rive.app
需看协议：运行时与资源的授权需按官方条款与资源许可分别确认。Rive 的优势在于可交互动画在多端运行时一致性强，适合做“状态驱动”的UI动画。团队协作时，把可交互逻辑写进动画本身，能显著减少开发实现成本。
工具地址：https://mixkit.co
免费商用：提供大量可免费商用的动效与视频素材，但仍建议在下载页确认许可细则。适合做开屏、背景动效、引导页视频片段等“非矢量”动效需求。与 Lottie 的定位不同，但能补足一些更写实或更氛围的动效场景。
工具地址：https://pixabay.com/videos/
免费商用：整体授权相对友好，但涉及人物/商标等内容仍需自查。用于寻找过渡动画、背景循环、轻量特效片段很方便。建议把它当作“兜底素材库”，在自制成本高或交付紧时快速补齐。
工具地址：https://fonts.google.com/icons
免费商用：遵循对应开源许可，可用于商用项目。虽然它本身不是动效库，但作为动效图标的“母版”非常实用：先选一套一致风格的图标，再在 AE / SVGator / Rive 中做动效，能保持整体统一。适合做产品级图标系统的长期维护。
