UseAnimations免费开源动画图标库

UseAnimations 是一个专注于动态图标的在线资源库，由捷克设计师 Patrik Svoboda 基于开源图标库 Feather Icons 开发，旨在为设计师和开发者提供即用型的微动画图标解决方案。该项目提供官网（useanimations.com）用于在线预览和下载原始素材，同时提供 React 专用组件库（react-useanimations）供前端开发者直接集成。

该库基于 Lottie动画技术，能够将 Adobe After Effects 制作的动画导出为 JSON 格式，并在 Web、iOS、Android 等平台上进行渲染。所有图标均基于 32px 网格设计，采用矢量格式，确保在不同尺寸设备上保持无损画质和流畅表现。

项目在 GitHub 上已获得 1.2k stars，近期仍有更新维护，社区活跃度良好。

功能特点

2.1 图标分类与数量

UseAnimations 包含 9 大类动态图标，涵盖警报、通知、导航、动作、媒体、加载、社交媒体、切换、内容等常见 UI交互场景，共有 50 多个动态图标。虽然数量上不如商用库丰富，但每个图标都经过精心设计，质量较高。

2.2 多格式支持

网站提供三种格式的下载选项，满足不同场景需求：

• SVG格式：适合 Web 项目直接嵌入，可自由调整颜色和尺寸

• JSON格式（Lottie）：适合移动应用，可通过 Lottie 工具进一步自定义动画参数

• AEP格式：Adobe After Effects 项目文件，适合设计师二次创作

2.3 React 专用组件库

react-useanimations 是官方维护的 React 组件库，将上述动画图标封装为开箱即用的 React组件，通过简单的 API 即可集成到 React应用中。

核心特性包括：

• 模块化设计：每个动画图标都是独立模块，可按需加载，避免打包体积膨胀

• 高度可配置：支持自定义大小、颜色、速度、循环等属性

• 按需加载优化：通过独立导入每个动画，确保最终 bundle 仅包含实际使用的图标

• 免费开源：遵循 MIT 开源协议，个人和商业项目均可免费使用

安装与使用教程

3.1 官网素材下载（设计师/非 React 项目）

访问 useanimations.com，鼠标悬停或点击图标即可预览动态效果。选择所需图标后，点击对应的 Download 链接即可下载 SVG、JSON 或 AEP 文件。

3.2 React组件库安装

使用 npm 或 yarn 安装：

npm install react-useanimations
# 或
yarn add react-useanimations

3.3 基础使用示例

import React from 'react';
import UseAnimations from 'react-useanimations';
// 每个动画需要单独导入，确保 bundle 只包含实际使用的内容
import heart from 'react-useanimations/lib/heart';

function App() {
  return (
    <div>
      <UseAnimations 
        animation={heart} 
        size={40} 
        strokeColor="red" 
        onClick={() => console.log('爱心被点击了！')} 
      />
    </div>
  );
}

3.4 常用配置参数

UseAnimations 组件提供以下配置属性：

3.5 实际应用场景示例

社交媒体按钮动画：

import UseAnimations from 'react-useanimations';
import github from 'react-useanimations/lib/github';
import twitter from 'react-useanimations/lib/twitter';

function SocialButtons() {
  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <UseAnimations animation={github} size={32} />
      <UseAnimations animation={twitter} size={32} />
    </div>
  );
}

表单交互反馈：

import React, { useState } from 'react';
import UseAnimations from 'react-useanimations';
import checkmark from 'react-useanimations/lib/checkmark';
import error from 'react-useanimations/lib/error';

function FormFeedback() {
  const [isValid, setIsValid] = useState(false);
  return (
    <div>
      {isValid ? (
        <UseAnimations animation={checkmark} size={24} strokeColor="green" />
      ) : (
        <UseAnimations animation={error} size={24} strokeColor="red" />
      )}
    </div>
  );
}

包装自定义组件（高级用法）：

function CustomButton() {
  return (
    <UseAnimations 
      animation={heart} 
      size={36}
      render={(eventProps, animationProps) => (
        <button 
          style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}
          {...eventProps}
        >
          <div {...animationProps} />
          喜欢
        </button>
      )}
    />
  );
}

3.6 其他框架支持

除了 React组件库，社区还提供了 Vue 3 版本 vue3-useanimations，Vue开发者可通过 npm 安装使用，用法与 React 版本类似。

使用建议与注意事项

4.1 适用场景

UseAnimations 特别适合以下场景：

• 表单控件：复选框、单选按钮等需要操作反馈的场景

• 加载指示器：替代传统静态加载图标，提升等待体验

• 交互式按钮：点赞、收藏、分享等需要点击反馈的按钮

• 导航菜单：让菜单项更加生动和易于识别

4.2 使用技巧

• 预览动效：在官网鼠标悬停或点击图标即可实时查看动画效果，避免下载后反复调试

• 按需选择格式：Web项目优先选 SVG，移动应用优先选 Lottie JSON

• 组合使用：可搭配静态图标库（如 Feather Icons）丰富界面层次感

• 按需导入：React 项目中务必单独导入每个动画，避免打包体积膨胀

4.3 注意事项

• 图标数量限制：相较于 Lordicon 等商用库，UseAnimations 图标数量较少（约 50 个），复杂项目需结合其他资源

• 动画触发方式：部分图标需点击或悬停才能触发动效，设计时需注意用户交互习惯

• 依赖外部库：使用 react-useanimations 会使项目依赖外部库，需关注后续更新和维护情况

• 可访问性考虑：对于重要的状态变化，建议配合文字描述使用，确保视障用户也能理解交互反馈

4.4 性能优化建议

• 只在需要的地方加载动画，避免全局过度使用

• 在整个应用中保持相似的动画风格和时长，维持视觉一致性

• 动画应增强用户体验，而不是分散用户注意力

• 利用 loop 和 autoplay 属性合理控制动画播放行为

4.5 补充资源推荐

如果 UseAnimations 的图标数量无法满足项目需求，可参考以下替代方案：

资源链接