哈喽，我是大鹏，这里是第二灵感库。
今天聊6个我常用的UI动效资源。
做UI动效，你大概也遇到过这些情况：
-
想加个 loading 动效，找半天找不到合适的 -
设计师给的动效文件，开发说"实现不了" -
想自己做动效，AE太复杂，学不会 -
找到的动效资源，商用要授权，不敢用
我这几年也是一路踩坑过来。
踩多了就发现：动效这事，工具选对了，效率直接翻倍。
下面这6个，都是我实际用过、踩过坑后留下的。
01 LottieFiles — 全球最大的Lottie动效资源平台
先说它是啥
LottieFiles 是一个专门提供 Lottie 格式动效文件的平台。
Lottie 是啥？简单说：设计师在 AE 里做好动效，导出成 JSON 文件，开发直接就能用，不用再手写道具代码。
核心价值：把"设计稿里的动效"和"开发实现"之间的墙给拆了。
能帮你干啥
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
为啥值得用（3个理由）
① 资源量真的大 全球最大的 Lottie 动效库，免费+付费的资源加起来几十万个。 loading、图标动效、引导页动画、庆祝动效（比如"支付成功"那个对勾打勾）……基本都能找到。
② 直接能用在项目里 下载的 JSON 文件，开发直接接入。 iOS、Android、Web、React Native 都支持。 不用再跟开发扯"这个动效能不能实现"——Lottie 格式本身就是可实现的。
③ 在线就能调 不用 AE，不用装软件。 在网页上直接调动效的颜色、速度、尺寸，调完再下载。 对非动效设计师来说，这个太友好了。
一个小缺点
免费资源够用，但好的资源基本要付费。 不过相比请一个动效设计师，一年会员也就一顿饭钱。
官网
https://lottiefiles.com/
02 Rive Community — 交互动效资源社区
先说它是啥
Rive 是一个交互动效设计工具，Community 是它上面的用户分享区。
和 Lottie 不一样的是：Rive 做出来的动效支持交互——用户点击、悬停、拖拽，动效会跟着变。
核心价值：做出来的不是"播放一遍的动画"，而是"能跟用户互动的动效"。
能帮你干啥
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
为啥值得用（3个理由）
① 动效能"活"起来 Lottie 是"播完就完了"的动画。 Rive 能做"用户点一下，按钮压下去；再点一下，弹回来"这种交互。 做组件库、设计系统的时候，这个能力太重要了。
② 性能比 CSS 动画好 Rive 用的是 GPU 加速渲染。 同样一个列表滚动动效，CSS 动画可能卡，Rive 能跑 120fps。
③ 可以直接看源码 社区里的文件，你下载下来就能看别人怎么做的。 我学 Rive 的时候，基本是"下载 → 拆解 → 自己做一个类似的"这样过来的。
一个小缺点
学习成本比 Lottie 高。 如果你只是想要个简单的 loading 动效，用 Lottie 更省事。 Rive 适合"需要交互动效"的场景。
官网
https://rive.app/community
03 Lordicon — 精美线性风动效图标
先说它是啥
Lordicon 是一个动效图标库，风格以线性风为主。
和普通的图标库不一样：它的图标自带动效。 比如一个"购物车"图标，不是静态的，而是"加进去的时候会晃一下"这种效果。
核心价值：直接给项目加"有动效的图标"，不用自己去做。
能帮你干啥
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
为啥值得用（3个理由）
① 风格统一度极高 普通图标库，不同图标之间风格可能有差异。 Lordicon 的图标是"同一套设计语言"做出来的，放在一起很和谐。
② 直接能用在项目里 支持导出 Lottie / SVG / GIF / MP4 多种格式。 开发说"我要 Lottie"就给 Lottie，说"我要 GIF"就给 GIF。
③ 免费版够用 免费版有 200+ 个图标，做普通项目基本够。 真要做商业项目，付费也就一杯奶茶钱。
一个小缺点
风格偏"线性、现代"。 如果你要的是"手绘风"、"3D 风"的图标，这个库不太合适。
官网
https://lordicon.com/
04 Storyset — 成套的场景化动态插画素材
先说它是啥
Storyset 是一个动态插画素材库。
和图标不一样，插画是"大一点的图"——比如一个"团队协作"的场景插画，里面有几个人、电脑、白板。
Storyset 的插画自带动效，而且可以自定义颜色、可以下载成 Lottie 格式。
核心价值：给你的"空状态页"、"引导页"加生动的动态插画，不用自己画。
能帮你干啥
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
为啥值得用（3个理由）
① 插画是"成套"的 不是"一张一张单独画的"，而是"同一套世界观下的不同场景"。 比如"团队协作"、"在线会议"、"数据分析"，这些主题都有对应的插画，放在一起很和谐。
② 可以自定义 在网页上直接改插画的主色，改完再下载。 不用 PS，不用 AI，改色很方便。
③ 免费可商用 免费版的插画，商用不需要署名（付费版可以去 logo）。 对商业项目来说，这个很重要。
一个小缺点
插画风格偏"年轻、活泼"。 如果你做的是"金融"、"法律"这种需要"稳重感"的产品，这个库的风格可能不太搭。
官网
https://storyset.com/
05 SVG Artista — 在线SVG描边动画生成工具
先说它是啥
SVG Artista 是一个在线工具，可以把 SVG 图形变成"描边动画"。
描边动画是啥？就是"线条一点点画出来"那种效果。 比如一个 Logo，不是直接显示，而是"从线条开始，一点点画出来"。
核心价值：不用写 CSS 代码，在线就能生成 SVG 描边动画。
能帮你干啥
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
为啥值得用（3个理由）
① 不用写代码 传统做法：要自己写 CSS @keyframes，调 stroke-dasharray、stroke-dashoffset，很麻烦。 用这个工具：粘贴 SVG 代码 → 点"Generate" → 复制生成的 CSS/JS 代码 → 完事。
② 生成的代码体积小 因为是 CSS/JS 动画，不是视频/GIF，文件大小很小。 对网页性能友好，不会拖慢加载速度。
③ 免费 所有功能免费，生成的代码也没有"水印"或"版权限制"。 商用没问题。
一个小缺点
只支持"描边动画"这一种效果。 如果你想要"淡入淡出"、"缩放"这种效果，这个工具做不了，得用别的（比如 Animista，下面会讲）。
官网
https://svgartista.net/
06 Animista — 在线CSS动效代码生成工具
先说它是啥
Animista 是一个在线 CSS 动效代码生成工具。
和 SVG Artista 不一样：它生成的是"通用 CSS 动效代码"，不只是描边动画，而是"淡入"、"滑动"、"缩放"、"旋转"……几乎所有常见的网页动效都能做。
核心价值：不用自己写 @keyframes，在线选效果、调参数、复制代码直接用。
能帮你干啥
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
为啥值得用（3个理由）
① 动效种类真的很全 进入动效（fade-in、slide-in）、退出动效（fade-out、slide-out）、强调动效（bounce、pulse）、背景动效……基本覆盖所有常见需求。
② 可以"收藏"动效 把多个动效加到"收藏夹"，然后一次性导出 CSS 文件。 对做设计系统来说，这个很方便——一次性把所有动效规范导出。
③ 代码质量不错 生成的代码，兼容性、性能都还可以。 当然，如果你对代码有洁癖，可以再手动优化一下。
一个小缺点
只生成代码，不提供"可视化编辑界面"。 你得大概知道"我想要啥效果"，然后去里面找对应的预设。 如果你是完全不懂代码的设计师，可能需要前端同事帮忙对接一下。
官网
https://animista.net/
6个动效资源，怎么选？
|
|
|
|---|---|
|
|
LottieFiles |
|
|
Rive Community |
|
|
Lordicon |
|
|
Storyset |
|
|
SVG Artista |
|
|
Animista |
一个提醒
动效用得好，能让设计稿"活"起来。
但动效不是"越多越好"。
我的一般做法：
- 先不加动效
，把静态设计稿做完 -
**再找"用户等待的地方"**加动效（比如数据加载、页面跳转） -
**最后找"需要反馈的地方"**加动效（比如点击按钮、操作成功）
动效是"调味料"，不是"主菜"。