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 lottie-ios@3.2.3  # 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. 跨平台适配
    • 响应式布局中动态调整动画尺寸。

应用场景

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

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

相关推荐
前端进阶者4 分钟前
天地图Marker跳一跳动画
前端
火柴就是我8 分钟前
每日见闻之Three.js 根据官方demo 理解相机位置
前端
JosieBook17 分钟前
【web应用】基于Vue3和Spring Boot的课程管理前后端数据交互过程
前端·spring boot·交互
刘大猫.24 分钟前
npm ERR! cb() never called!
前端·npm·node.js·npm install·npmm err·never called
咔咔一顿操作28 分钟前
常见问题三
前端·javascript·vue.js·前端框架
上单带刀不带妹29 分钟前
Web Worker:解锁浏览器多线程,提升前端性能与体验
前端·js·web worke
电商API大数据接口开发Cris1 小时前
Node.js + TypeScript 开发健壮的淘宝商品 API SDK
前端·数据挖掘·api
还要啥名字1 小时前
基于elpis下 DSL有感
前端
一只毛驴1 小时前
谈谈浏览器的DOM事件-从0级到2级
前端·面试
用户8168694747251 小时前
封装ajax
前端