React 学习指南 - 第十二天 🚀

主题：React 动画与 Framer Motion 🎬💫

今天，我们来学习如何在 React 应用中添加动画。动画不仅能提升用户体验，还能让你的 UI 更加生动流畅。

React 生态中有很多动画库，比如：

• CSS 方式：@keyframes + transition

• 原生 JS 方式：requestAnimationFrame()

• React 生态动画库：

• react-transition-group（老牌动画库）

• Framer Motion（推荐，功能强大，API 直观）

今天，我们重点讲 Framer Motion，它是 React 动画的最佳选择之一。

1. 安装 Framer Motion

npm install framer-motion

安装完成后，我们可以在 React 组件中直接使用 motion 组件。

2. 基本动画

Framer Motion 提供 motion.div 代替 div，让普通 HTML 元素具有动画能力。

2.1 进入动画

import { motion } from "framer-motion";

function Box() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
      style={{
        width: 100,
        height: 100,
        backgroundColor: "tomato",
        margin: "20px auto",
      }}
    />
  );
}

export default Box;

✅ initial：动画初始状态（opacity: 0, scale: 0.5）
✅ animate：目标状态（opacity: 1, scale: 1）
✅ transition：动画过渡时长 0.5s

3. 点击触发动画

Framer Motion 允许你使用 whileHover 和 whileTap 轻松实现交互动画。

<motion.div
  whileHover={{ scale: 1.2 }}
  whileTap={{ scale: 0.8 }}
  style={{
    width: 100,
    height: 100,
    backgroundColor: "blue",
    margin: "20px auto",
    borderRadius: 10
  }}
/>

✅ whileHover：鼠标悬停时放大
✅ whileTap：点击时缩小

4. 列表动画（variants 变体）

在 Framer Motion 中，我们可以使用 variants 来管理多个动画状态。

import { motion } from "framer-motion";

const listVariants = {
  hidden: { opacity: 0, y: -20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.5, staggerChildren: 0.2 } }
};

const itemVariants = {
  hidden: { opacity: 0, x: -10 },
  visible: { opacity: 1, x: 0, transition: { duration: 0.3 } }
};

function List() {
  return (
    <motion.ul variants={listVariants} initial="hidden" animate="visible" style={{ listStyle: "none" }}>
      {["Item 1", "Item 2", "Item 3"].map((item, index) => (
        <motion.li key={index} variants={itemVariants} style={{ marginBottom: 10, padding: 10, background: "#ddd" }}>
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}

export default List;

✅ variants：用于组织不同动画状态
✅ staggerChildren：让子元素动画依次播放，而不是同时执行

5. 页面切换动画

Framer Motion 提供 AnimatePresence 组件，让我们在组件卸载时播放离场动画。

import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";

function ToggleComponent() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>切换</button>
      <AnimatePresence>
        {isVisible && (
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 20 }} // 组件卸载时的动画
            transition={{ duration: 0.5 }}
            style={{
              marginTop: 20,
              padding: 20,
              background: "lightblue",
              borderRadius: 5,
            }}
          >
            我是可切换的组件
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default ToggleComponent;

✅ AnimatePresence 监听 isVisible 变化，在组件卸载时执行 exit 动画
✅ exit 定义离场动画，使组件平滑消失

6. 拖拽动画

Framer Motion 允许我们快速添加拖拽效果（drag）。

<motion.div
  drag
  dragConstraints={{ left: -50, right: 50, top: -50, bottom: 50 }}
  style={{
    width: 100,
    height: 100,
    backgroundColor: "purple",
    margin: "50px auto",
    borderRadius: 10
  }}
/>

✅ drag 让元素可拖拽
✅ dragConstraints 限制拖拽范围（在 -50px ~ 50px 之间）

🔹 明天预告：React 性能优化（React.memo、useMemo、useCallback）！ 🎯