React集成Framer Motion，为应用添加动画效果Framer Motion 是一个用于 React 的开源动

Framer Motion 是一个用于 React 的开源动画库，专为创建高性能、流畅的动画效果而设计。它的核心优势在于其直观的 API、流畅的动画效果以及强大的功能集，从简单的平移到复杂的交互动画，Framer Motion 都能轻松实现。

特点

简洁的 API：API 设计得非常直观，易于上手。可以通过简单的属性和函数调用来实现动画效果。
响应式设计：Framer Motion 支持基于不同屏幕尺寸和设备的响应式动画，让你的应用在各种设备上都能表现出色。
高性能：该库利用了 React 的虚拟 DOM 和 CSS 动画的优势，即使在复杂的场景中也能保持流畅。
社区支持：作为一个流行的开源项目，Framer Motion 拥有活跃的社区，提供丰富的资源和支持。
功能丰富：支持多种动画效果，包括过渡、拖拽、缩放、旋转等，满足不同的需求。

核心功能介绍

动画过渡：通过 animate 属性，可以轻松地定义从一个状态到另一个状态的过渡动画。
拖拽功能：内置拖拽支持，开发者可以使用 drag 属性为元素添加拖拽效果，并定义边界和拖拽方向。
自动布局动画：在元素布局变化时自动添加过渡动画，避免元素位置变化的生硬感。
变换和关键帧动画：使用 transition 和 keyframes 可以定义更加精细的动画效果。
手势和事件监听：支持 hover、tap 等手势事件，并可以通过这些事件触发动画。

Framer Motion示例

在使用之前先看几个效果感受一下。

安装

使用 npm 或 yarn 安装：

npm install framer-motion
# 或者
yarn add framer-motion

实现基本动画

Framer Motion 的基础动画通过 motion 组件来实现。motion 是一个高阶组件，提供了多个用于动画的组件，它可以包裹任何 HTML 元素包含svg，并将其转化为支持动画的组件。常用的是 motion.div。

以下用几个示例学习它的用法：

过渡动画

3秒钟，div透明度从0到1

import { motion } from "framer-motion";

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 3 }}
>
  <h1>Hello, Framer Motion!</h1>
</motion.div>

initial 属性定义了组件初始状态
animate 定义了动画结束时的状态
exit 定义了组件退出时的状态
transition 用于控制动画的持续时间

按钮hover、点击效果

<motion.button
  whileHover={{ scale: 1.2, backgroundColor: "#ff4081", color: "#fff" }}
  whileTap={{ scale: 0.9 }}
  style={{
    padding: "10px 20px",
    fontSize: "16px",
    borderRadius: "5px",
    border: "none",
    cursor: "pointer",
    backgroundColor: "#6200ea",
    color: "#fff",
    outline: "none",
  }}
>
  Hover Me
</motion.button>

whileHover 和 whileTap 是用于在鼠标悬停和点击时触发动画的属性。这两个属性可以轻松创建交互式动画效果。

动画组合

在点击按钮时触发多个动画效果

const [clicked, setClicked] = useState(false);

<motion.div>
  <motion.button
    onClick={() => setClicked(!clicked)}
    animate={{ scale: clicked ? 1.3 : 1, color: clicked ? "#ff4081" : "#6200ea" }}
    transition={{ duration: 0.2 }}
  >
    Click Me
  </motion.button>
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: clicked ? 1 : 0 }}
    transition={{ duration: 0.5 }}
  >
    <p>Button Clicked!</p>
  </motion.div>
</motion.div>

variants 变体

用于管理较为复杂的动画序列

const boxVariants = {
  hidden: { opacity: 0, x: -100 },
  visible: { opacity: 1, x: 0 },
};

<motion.div
  variants={boxVariants}
  initial="hidden"
  animate="visible"
  transition={{ duration: 0.5 }}
>
  Animated Box
</motion.div>

拖拽动画

<motion.div
  drag="x" // 启用拖拽功能
  dragConstraints={{ left: 0, top: 0, right: 200, bottom: 200 }} // 限制拖拽范围
  dragElastic={0.2} // 弹性效果
  initial={{ x: 0, y: 0 }}
  animate={{ x: 0, y: 0 }}
  transition={{ duration: 0.5 }}
  style={{
    width: 100,
    height: 100,
    backgroundColor: "royalblue",
    borderRadius: 10,
    cursor: "pointer",
  }}
></motion.div>

drag: 启用拖拽功能。可以传递 'x', 'y', 'xy' 来限制拖拽的方向。
dragConstraints: 限制拖拽的范围。这个属性接受一个对象，定义了拖拽的边界（left, top, right, bottom）。
dragElastic: 控制拖拽弹性的效果，值越大拖拽越有弹性

曲线动画

const [isTrans, setIsTrans] = useState(false);

<motion.div
  className="w-16 h-16 rounded-full"
  style={{ background: "red" }}
  initial={{ opacity: 0 }}
  animate={{ opacity: 1, x: isTrans ? 200 : 0 }}
  transition={{ duration: 0.5, ease: "backOut" }}
/>

<Button type="primary" onClick={() => setIsTrans(!isTrans)}>
  移动
</Button>

ease设置动画曲线：

"linear"
"easeIn", "easeOut", "easeInOut"
"circIn", "circOut", "circInOut"
"backIn", "backOut", "backInOut"
"anticipate"
自定义cubic-bezier曲线：[0.42, 0, 0.58, 1]

写在最后

Framer Motion 是一个强大的动画库，动画效果极其丝滑，适用于希望为其 React 应用添加动画效果的开发者。通过简单的 API 和丰富的功能,开发者可以快速实现各种动画效果，提升用户体验。

感谢您的阅读！

React集成Framer Motion，为应用添加动画效果

特点