React经典常用动画库，让你一招变动画大佬！！！

大家好，我是鱼樱！！！

关注公众号【鱼樱AI实验室】持续每天分享更多前端和AI辅助前端编码新知识~~喜欢的就一起学反正开源至上，无所谓被诋毁被喷被质疑文章没有价值~

一个城市淘汰的自由职业-农村前端程序员（虽然不靠代码挣钱，写文章就是为爱发电），兼职远程上班目前！！！热心坚持分享~~~

今天大家分享一些有意思的动画库~ 并且推荐一个双越老师的划水AI项目有需要的可以私我走优惠通道~

以下是 React 中常用的动画库及其核心用法指南，结合了多个来源的实践案例和文档说明：

一、React Spring 官网参考

特点：基于弹簧物理模型的动画库，支持声明式语法和高度可定制的动画效果。

安装：
sh 复制代码
```
 
npm install react-spring
```
核心 API：
- useSpring：用于创建单个动画效果，返回动画属性。
- animated：包裹需应用动画的组件，支持样式插值。

示例（数字过渡动画） ：

js 复制代码

 
import { useSpring, animated } from 'react-spring';
function NumberAnimation({ value }) {
  const props = useSpring({ number: value, from: { number: 0 } });
  return (
    <animated.span>
      {props.number.to(n => n.toFixed(0))}
    </animated.span>
  );
}

应用场景：数值变化、元素位移、透明度变化等。

二、React Transition Group 官网参考

特点：专注于组件入场/出场动画，依赖 CSS 类实现过渡效果。

安装：
sh 复制代码
```
 
npm install react-transition-group
```
核心组件：
- CSSTransition：控制单个元素的动画生命周期。
- TransitionGroup：管理列表元素的批量动画（如动态列表）。

示例（元素淡入淡出） ：

js 复制代码

 
import { CSSTransition } from 'react-transition-group';
function FadeComponent({ isVisible }) {
  return (
    <CSSTransition
      in={isVisible}
      timeout={300}
      classNames="fade"
      unmountOnExit
    >
      <div>内容</div>
    </CSSTransition>
  );
}

CSS 类定义：

css 复制代码

 
.fade-enter { opacity: 0; }
.fade-enter-active { opacity: 1; transition: opacity 300ms; }
.fade-exit { opacity: 1; }
.fade-exit-active { opacity: 0; transition: opacity 300ms; }

应用场景：弹窗、路由切换、列表增删动画。

三、Framer Motion framer motion 官方网站、framer 一个设计网站

特点：直观的声明式动画语法，支持复杂交互和手势动画。

安装：
sh 复制代码
```
 
npm install framer-motion
```
核心 API：
- motion：动画组件前缀（如 motion.div）。
- 动画属性：initial（初始状态）、animate（目标状态）、transition（过渡配置）。

示例（元素缩放） ：

js 复制代码

 
import { motion } from "framer-motion";
function ScaleComponent() {
  return (
    <motion.div
      initial={{ scale: 0 }}
      animate={{ scale: 1 }}
      transition={{ duration: 0.5 }}
    >
      缩放内容
    </motion.div>
  );
}

应用场景：交互式按钮、页面元素入场效果、拖拽动画。

四、其他推荐库

React Motion 官网参考

- 特点：基于物理模型的动画，适合复杂动态效果。 - 核心 API ：<Motion> 组件通过 style 属性动态计算值。

Ant Motion
- 特点：Ant Design 配套动画方案，提供预设动画集合。
- 应用场景：企业级后台系统的标准化动效。
React Move 官网参考

- 特点：数据驱动的动画，适合可视化图表过渡。 - 核心 API ：NodeGroup 管理数据变化与动画映射。

五、选择建议

简单过渡动画 ：优先使用 react-transition-group + CSS 类。
复杂交互动画 ：选择 react-spring 或 Framer Motion，前者适合物理模拟，后者适合声明式语法。
数据可视化 ：考虑 React Move 或 react-spring 的插值功能。

特别的

1.reactbits 官网参考/在线案例

React Bits 是一个大型的动画 React 组件集合，包含动画、组件、背景，动画创意满满，开源免费使用！这些组件都通过 props 提供了自定义选项，可以轻松定制

React 组件 jsx 代码和样式可以直接复制粘贴，支持JS、TS两种模式，样式支持纯CSS和Tailwindcss 实现

2.remotion 官网参考

Remotion允许使用熟悉的工具和语言（如 HTML、CSS、JavaScript 和 TypeScript）创建视频和动画。

3.Lottie 官网参考

Lottie 是 Airbnb 开源的动画库，支持通过 JSON 文件渲染由 Adobe After Effects 制作的动画。其优势包括：

高性能：JSON 文件体积小，渲染效率高。
跨平台：支持 Web、React Native、iOS、Android。
设计与开发协作：设计师通过 AE 制作动画，开发者直接调用 JSON 文件，实现"所见即所得"。

安装与引入

安装依赖 ：

sh 复制代码

npm install react-lottie @types/react-lottie  # React Web 项目
yarn add lottie-react-native [email protected]  # React Native 项目

JSON 文件获取 ：
- 从 Lottie 官网下载免费动画。
- 使用 Adobe After Effects + Bodymovin 插件导出动画 JSON 文件。

基础用法

基本配置

jsx 复制代码

import Lottie from "react-lottie";
import animationData from "./animation.json";

const App = () => {
  const options = {
    loop: true,
    autoplay: true,
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",  // 保持宽高比
    },
  };

  return <Lottie options={options} height={200} width={200} />;
};

控制动画状态通过 eventListeners 和 ref 控制播放、暂停等行为：

jsx 复制代码

const lottieRef = useRef(null);

<Lottie
  ref={lottieRef}
  options={options}
  isStopped={false}
  isPaused={false}
  eventListeners={[
    {
      eventName: "complete",
      callback: () => console.log("动画播放完成"),
    },
  ]}
/>;

// 手动控制
lottieRef.current?.play();
lottieRef.current?.pause();
lottieRef.current?.stop();

进阶控制

1. 动态参数调整

速度控制 ：通过 speed 属性调整播放速度（设为 0 暂停，1 正常速度）。

进度控制 ：结合 Animated 库实现动画进度绑定（如点赞效果）：

jsx 复制代码

const progress = useRef(new Animated.Value(0)).current;
<LottieView source={animationData} progress={progress} />;

资源路径问题

本地资源：直接导入 JSON 文件。

远程资源 ：将 JSON 和图片托管至 CDN，通过 path 或 assetsPath 指定路径：

jsx 复制代码

lottie.loadAnimation({
  container: element,
  path: "https://cdn.example.com/animation.json",
  assetsPath: "https://cdn.example.com/images/",
});

常见问题与解决

动画不播放 ：
- 检查 JSON 文件路径是否正确。
- 确保 autoplay 设为 true 或手动调用 play()。
图片加载失败 ：
- 使用 CDN 统一管理资源路径。
React Native 兼容性 ：
- 确保原生依赖正确链接（如 iOS 的 CocoaPods 配置）。

最佳实践

性能优化 ：
- 压缩 JSON 文件大小，避免复杂动画。
- 使用 useMemo 缓存动画配置。
交互设计 ：
- 结合用户操作触发动画（如点击、滚动）。
跨平台适配 ：
- 响应式布局中动态调整动画尺寸。

应用场景

加载动画：数据请求时的等待提示。
交互动画：按钮点击、表单提交反馈。
页面过渡：路由切换时的平滑效果。

你们都用哪些动画库呢欢迎留言分享好用的动画库~