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

大家好，我是鱼樱！！！

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

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

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

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

---

一、React Spring 官网参考

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

1. 安装：

    
   npm install react-spring

2. 核心 API：

   • useSpring：用于创建单个动画效果，返回动画属性。
   • animated：包裹需应用动画的组件，支持样式插值。

3. 示例（数字过渡动画） ：

    
   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 类实现过渡效果。

1. 安装：

    
   npm install react-transition-group

2. 核心组件：

   • CSSTransition：控制单个元素的动画生命周期。
   • TransitionGroup：管理列表元素的批量动画（如动态列表）。

3. 示例（元素淡入淡出） ：

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

   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 一个设计网站

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

1. 安装：

    
   npm install framer-motion

2. 核心 API：

   • motion：动画组件前缀（如 motion.div）。
   • 动画属性：initial（初始状态）、animate（目标状态）、transition（过渡配置）。

3. 示例（元素缩放） ：

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

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

---

四、其他推荐库

1. React Motion 官网参考

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

2. Ant Motion

   • 特点：Ant Design 配套动画方案，提供预设动画集合。
   • 应用场景：企业级后台系统的标准化动效。

3. 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 文件，实现"所见即所得"。

安装与引入

1. 安装依赖 ：

   npm install react-lottie @types/react-lottie  # React Web 项目
   yarn add lottie-react-native lottie-ios@3.2.3  # React Native 项目

2. JSON 文件获取 ：

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

---

基础用法

1. 基本配置

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} />;
};

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

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 库实现动画进度绑定（如点赞效果）：

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

资源路径问题

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

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

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

---

常见问题与解决

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

---

最佳实践

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

---

应用场景

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

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