React经典常用动画库,让你一招变动画大佬!!!

大家好,我是鱼樱!!!

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

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

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

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


一、React Spring 官网参考

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

  1. 安装

    sh 复制代码
     
    npm install react-spring
  2. 核心 API

    • useSpring:用于创建单个动画效果,返回动画属性。
    • animated:包裹需应用动画的组件,支持样式插值。
  3. 示例(数字过渡动画)

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

  1. 安装

    sh 复制代码
     
    npm install react-transition-group
  2. 核心组件

    • CSSTransition:控制单个元素的动画生命周期。
    • TransitionGroup:管理列表元素的批量动画(如动态列表)。
  3. 示例(元素淡入淡出)

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

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

  1. 安装

    sh 复制代码
     
    npm install framer-motion
  2. 核心 API

    • motion:动画组件前缀(如 motion.div)。
    • 动画属性:initial(初始状态)、animate(目标状态)、transition(过渡配置)。
  3. 示例(元素缩放)

    js 复制代码
     
    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 属性动态计算值。

  1. Ant Motion

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

- 特点 :数据驱动的动画,适合可视化图表过渡。 - 核心 APINodeGroup 管理数据变化与动画映射。


五、选择建议

  • 简单过渡动画 :优先使用 react-transition-group + CSS 类。
  • 复杂交互动画 :选择 react-springFramer Motion,前者适合物理模拟,后者适合声明式语法。
  • 数据可视化 :考虑 React Movereact-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. 安装依赖

    sh 复制代码
    npm install react-lottie @types/react-lottie  # React Web 项目
    yarn add lottie-react-native [email protected]  # React Native 项目
  2. JSON 文件获取

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

基础用法

  1. 基本配置
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} />;
};
  1. 控制动画状态 通过 eventListenersref 控制播放、暂停等行为:
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,通过 pathassetsPath 指定路径:

    jsx 复制代码
    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. 跨平台适配
    • 响应式布局中动态调整动画尺寸。

应用场景

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

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

相关推荐
qq_3325394523 分钟前
React 前端框架推荐
前端·react.js·前端框架
拉不动的猪41 分钟前
刷刷题34(uniapp中级实际项目问题-1)
前端·vue.js·面试
奔跑的露西ly1 小时前
【HarmonyOS NEXT】实现文字环绕动态文本效果
前端·javascript·html·harmonyos
irving同学462383 小时前
Next.js 组件开发最佳实践文档(TypeScript 版)
前端
刺客-Andy3 小时前
React Vue 项开发中组件封装原则及注意事项
前端·vue.js·react.js
marzdata_lily3 小时前
从零到上线!7天搭建高并发体育比分网站全记录(附Java+Vue开源代码)
前端·后端
小君3 小时前
让 Cursor 更加聪明
前端·人工智能·后端
顾林海3 小时前
Flutter Dart 异常处理全面解析
android·前端·flutter
残轩4 小时前
JavaScript/TypeScript异步任务并发实用指南
前端·javascript·typescript
用户88442839014254 小时前
xterm + socket.io 实现 Web Terminal
前端