useAnimations 是一个微动画图标库，所有图标基于 32px 网格 构建。每个图标同时输出 SVG 与 Lottie (JSON) 两种格式，可直接嵌入 Web、Android 和 iOS 项目。整套图标库采用 CC BY 4.0 授权，免费可商用，但要求保留 useanimations.com 的出处链接。这与 Lordicon 等订阅制图标库形成了明显差异。
系统集成 – 技术规格速查表
通过下表可以快速判断 useAnimations 是否适配你的技术栈。
| 特性 | 详细说明 |
|---|---|
| 文件格式 | SVG + Lottie (.json)，单包同时交付 |
| 调用方式 | 提供轻量 API，可在主流前端框架内直接加载 |
| 平台兼容 | Web、Android、iOS 全覆盖，图标采用响应式矢量设计 |
| 网格规范 | 基于 32px 网格绘制，保证多尺寸下视觉一致 |
| 可编辑性 | Lottie .json 支持二次编辑（颜色、时长、关键帧） |
| 加载性能 | 矢量+JSON 通常小于同效果的 GIF 或 sprite 序列帧 |
SVG 与 Lottie 动画图标 – 双格式交付能做什么
该图标库的每张图标同时输出 SVG 与 Lottie 两种格式，可按场景灵活选用。SVG 适合状态切换简单的场景（如 hover、active），Lottie 则承担连续动画播放——通过 Lottie 播放器加载 JSON 文件即可渲染。
- 矢量清晰度： SVG 路径保证图标在 16px、32px、64px 等多档尺寸下都保持锐利边缘，规避位图放大的糊化问题。
- 二次编辑空间： Lottie JSON 可在 LottieFiles Editor 或 After Effects 中修改颜色、速度、关键帧，便于贴合品牌色板。
- 覆盖常见交互： 库内置加载、点赞、菜单、通知、音视频控制等数十种基础交互图标，省去从零设计动效的成本。
- 多框架适配： 文件可同时服务于 React、Vue、Angular 或原生 JS 项目。集成只需引入 Lottie 播放器并指向 JSON 路径。
集成四步走 – 从预览到上线
- 预览与挑选： 在 useAnimations 官网浏览图标库，点击任意图标即可在浏览器中实时预览，确认节奏与风格匹配项目调性。
- 下载文件包： 选中后下载压缩包，包内包含 SVG 与 Lottie (.json) 两份文件，文件名与图标 ID 对应。
- 基础集成： Web 项目推荐使用
lottie-web播放器，将 .json 放入静态资源目录，约 5 行 JS 代码即可渲染动画。 - 进阶定制： 调整颜色或速度可直接修改 .json 中相应字段；批量改造建议借助 LottieFiles 在线编辑器。
授权边界 – 免费不等于随意再分发
整套图标库采用 CC BY 4.0 授权，这是开发者集成前最需要先看清的合规要点。
允许的行为包括：个人项目、商业项目、Web 与移动应用内嵌使用、修改后使用，前提是注明 useanimations.com 来源。
禁止的行为包括：再分发原始文件、转售、租赁、再许可，以及将图标打包进可转售的模板或商品（例如商业主题、UI Kit）。
这条边界容易被忽视：把图标用在客户交付的网站上没问题，但把图标本身作为商品二次销售就会触发授权冲突。
UI设计流程中的 useAnimations 定位
在 UI 设计的常规流程里，useAnimations 通常落在高保真原型与前端开发交接的环节。设计师在 Figma 中标注交互意图后，开发者直接从该平台拉取对应动效，省去手写 CSS keyframes 的工作。在 0-1 阶段它也适合做演示 Demo：用现成的微动画验证交互设想，比从零搭建动效节省一周以上的开发时间。
可能会遇到的问题
- 可定制范围有限： Lottie JSON 仅支持颜色、时长、关键帧层面的修改，完全改造动作轨迹需回到 After Effects 重做。
- 外部播放器依赖： Lottie 动画依赖
lottie-web或对应框架播放器，包体积约 60KB（gzip 后），对出色轻量项目需权衡。 - 过度动画反噬体验： 微动画的魅力在于克制，过多图标同时播放反而分散注意力。建议只在状态切换、操作反馈等关键节点使用。
- 新手集成门槛： Stack Overflow 上有大量关于下载 JSON 后如何使用的提问，建议先通读 Lottie 播放器文档再上手集成。
集成前先确认 CC BY 4.0 的署名要求是否与客户合同冲突。这是开发者最容易忽略、也最容易埋下版权隐患的环节。
