2. Framer Motion入门从＜motion.div /＞开始

1. 什么是 <motion.div />？

在 Framer Motion 中，<motion.div /> 不是一个普通的 HTML <div> 元素。它是一个由 Framer Motion 提供的特殊组件，用于增强标准的 HTML 元素，使其具备动画和手势交互的能力。你可以将它看作是 <div> 元素的一个“动画增强版”。

2. 安装 Framer Motion

首先，确保你的 React 项目已经安装了 Framer Motion。如果还没有，可以通过 npm 或 yarn 进行安装：

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

3. 导入 motion 组件

在你的 React 组件文件中，你需要从 framer-motion 库中导入 motion 对象：

import { motion } from "framer-motion";

4. 将 HTML 标签替换为 motion 版本

要让一个 HTML 元素拥有动画能力，你需要将其标签替换为 motion 对象下的对应版本。例如，要让一个 <div> 可以动画，就使用 <motion.div />；要让一个 button 可以动画，就使用 <motion.button />，以此类推。

import { motion } from "framer-motion";

function MyComponent() {
  return (
    <div>
      {/* 普通的 div，没有动画能力 */}
      <div>Hello</div>

      {/* 可以进行动画的 div */}
      <motion.div>World</motion.div>
    </div>
  );
}

export default MyComponent;

5. 添加基本的动画属性

现在，你已经拥有了一个可以进行动画的 <motion.div />。接下来，你可以通过为其添加特定的动画属性来定义动画效果。最常用的属性包括：

• initial: 定义组件挂载时的初始状态。它是一个包含 CSS 属性的对象。
• animate: 定义组件需要动画到的目标状态。它也是一个包含 CSS 属性的对象。
• transition: 定义动画的过渡效果，例如持续时间、缓动函数等。

简单淡入动画示例：

import { motion } from "framer-motion";

function FadeInDiv() {
  return (
    <motion.div
      initial={{ opacity: 0 }} // 初始时完全透明
      animate={{ opacity: 1 }} // 动画到完全不透明
      transition={{ duration: 0.5 }} // 动画持续 0.5 秒
      style={{
        width: 200,
        height: 100,
        backgroundColor: "lightblue",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      淡入的 Div
    </motion.div>
  );
}

export default FadeInDiv;

在这个例子中，当 FadeInDiv 组件挂载时，它的 opacity 初始值为 0。然后，Framer Motion 会自动将 opacity 动画到 1，动画的持续时间为 0.5 秒，产生一个淡入的效果。

6. 更多动画属性

除了 opacity，你还可以动画许多其他的 CSS 属性，例如：

• Position and Transform: x, y, scale, rotate, skewX, skewY
• Size: width, height
• Color: backgroundColor, color
• Border: borderWidth, borderColor, borderRadius
• Visibility: opacity
• SVG Path: pathLength, pathOffset (用于绘制动画)

缩放和移动动画示例：

import { motion } from "framer-motion";

function ScaleAndMoveDiv() {
  return (
    <motion.div
      initial={{ scale: 0.5, x: -50 }}
      animate={{ scale: 1, x: 0 }}
      transition={{ type: "spring", stiffness: 100 }} // 使用弹簧动画
      style={{
        width: 150,
        height: 150,
        backgroundColor: "lightcoral",
        borderRadius: 10,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        color: "white",
        fontWeight: "bold",
      }}
    >
      缩放和移动
    </motion.div>
  );
}

export default ScaleAndMoveDiv;

这里使用了 scale 和 x 属性进行缩放和水平移动，并且 transition 的 type 设置为 "spring"，创建了一个弹簧效果的动画。

7. 交互动画

motion 组件还提供了处理用户交互的属性，例如：

• whileHover: 定义鼠标悬停时的动画状态。
• whileTap: 定义鼠标点击（按下和释放）时的动画状态。

悬停放大示例：

import { motion } from "framer-motion";

function HoverScaleDiv() {
  return (
    <motion.div
      style={{
        width: 100,
        height: 100,
        backgroundColor: "lightgreen",
        borderRadius: 50,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        cursor: "pointer",
      }}
      whileHover={{ scale: 1.2 }}
      transition={{ duration: 0.2 }}
    >
      Hover Me
    </motion.div>
  );
}

export default HoverScaleDiv;

当鼠标悬停在这个圆形 div 上时，它会放大到 1.2 倍，移开后会恢复原状，动画持续 0.2 秒。

总结：<motion.div /> 的入门要点

1. 导入 motion: 从 framer-motion 导入 motion 对象。
2. 替换标签: 将需要动画的 HTML 标签替换为 motion.<YourHTMLTag />。
3. 使用动画属性: 通过 initial、animate、transition 等属性定义动画的起始、目标和过渡效果。
4. 探索更多属性: 尝试不同的 CSS 属性和 Framer Motion 提供的特殊动画属性。
5. 添加交互: 使用 whileHover、whileTap 等属性创建交互式的动画效果。

<motion.div /> 是你进入 Framer Motion 世界的起点。通过掌握这些基本的概念和属性，你就可以开始为你的 React 应用添加各种各样令人愉悦和流畅的动画效果了。随着你对 Framer Motion 的深入学习，你还会发现更多高级的功能，例如 variants、useMotionValue 和 useTransform，它们能帮助你创建更复杂和自定义的动画。