做动效素材和 Lottie 动画时，常见需求包括：快速找现成动画、把矢量动效导出为 Lottie、在网页或 App 里稳定播放、以及在团队里复用同一套动效资产。下面整理 12 个常用资源与工具入口，覆盖预览下载、制作编辑、转换与开发接入，方便按项目预算和交付格式快速选型。
需看协议：提供大量 Lottie 动画预览与下载、在线预览与分享链接；适合快速找动效参考与组件化素材。
工具地址：https://rive.app/
需看协议：支持交互式矢量动画与状态机，适合做可交互的 UI 动效与游戏 UI；可输出运行时资源供多端接入。
需看协议：动效图标库，风格统一、上手快；适合做产品引导、空状态、按钮反馈等轻量动效。
需看协议：在线 SVG 动画制作工具，适合把图标/插画做成可控的矢量动效；可导出多种格式用于网页与产品内嵌。
工具地址：https://www.lottielab.com/
需看协议：面向 Lottie 的编辑与协作，适合做微动效、加载与过渡；对团队复用与在线迭代更友好。
需看协议：在线做短动效与社媒/产品演示动画，模板丰富；适合快速产出过场、介绍页动效与演示片段。
免费商用：提供 CSS 动画生成与代码片段，适合网页端快速做进入/退出、强调、悬停等基础动效，无需复杂动画工具链。
工具地址：https://motion.dev/
需看协议：偏开发侧的动效库与实践入口，适合前端快速实现时间轴、弹性、滚动驱动等动效；与组件体系结合更顺手。
工具地址：https://www.keyshapeapp.com/
需看协议：专注矢量动画的工具，适合制作可控的 UI 动效与图标动画；对输出到网页端的工作流较友好。
工具地址：https://glaxnimate.mattbas.org/
免费商用：开源矢量动画工具，适合做基础动效练手与小规模资产制作；也适合作为轻量替代方案补齐工具链。
工具地址：https://github.com/airbnb/lottie-web
需看协议：网页端播放 Lottie 的核心实现之一，适合开发接入与排查兼容性问题；可结合项目封装成统一播放器组件。
工具地址：https://ae s.com/bodymovin/
需看协议：After Effects 导出 Lottie 的经典路径，适合将既有 AE 动效转成可在产品中复用的动画资产；导出前建议统一命名与分层规则。
