一个功能强大且易于使用的动画库 Framer Motion

1. 安装 Framer Motion

首先，你需要在你的 React 项目中安装 Framer Motion。使用 npm 或者 yarn 可以很方便地安装：

npm install framer-motion

或

yarn add framer-motion

2. 基本用法

Framer Motion 的核心组件是 motion。你可以通过将普通的 HTML 元素（如 div、span 等）替换为 motion.div、motion.span 等来启用动画。

以下是一个简单的示例，演示如何使用 Framer Motion 创建一个简单的进入动画：

import React from 'react';
import { motion } from 'framer-motion';

const MyComponent = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }} // 初始状态
      animate={{ opacity: 1 }} // 动画状态
      exit={{ opacity: 0 }} // 退出状态
      transition={{ duration: 0.5 }} // 动画时长
    >
      <h1>Hello, Framer Motion!</h1>
    </motion.div>
  );
};

export default MyComponent;

在这个例子中，initial 定义了组件的初始状态，animate 定义了组件的动画效果，exit 则定义了组件退出时的状态。transition 用于设置动画的持续时间。

3. 动画属性

Framer Motion 支持多种动画属性，以下是一些常用的属性：

• x、y：用于平移组件的位置。
• scale：用于缩放组件。
• rotate：用于旋转组件。
• opacity：用于设置组件的透明度。
• backgroundColor：用于设置背景颜色。

示例：

<motion.div
  initial={{ scale: 0 }}
  animate={{ scale: 1 }}
  transition={{ type: 'spring', stiffness: 300 }}
>
  <h1>Animating Scale!</h1>
</motion.div>

4. 使用 Variants

Variants 是 Framer Motion 的一个强大特性，它允许你定义一组状态（如初始、进入、退出）并在不同的状态之间切换。使用 Variants 可以让动画的管理更加清晰和易于维护。

以下是一个使用 Variants 的示例：

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

const MyBox = () => {
  return (
    <motion.div
      variants={boxVariants}
      initial="hidden"
      animate="visible"
      exit="exit"
      transition={{ duration: 0.5 }}
    >
      <h1>Box with Variants!</h1>
    </motion.div>
  );
};

在这个例子中，我们定义了一个 boxVariants 对象，它包含了三个状态：hidden、visible 和 exit。通过 initial、animate 和 exit 属性，Framer Motion 会根据这些状态自动处理动画。

5. 事件处理

Framer Motion 还支持事件处理，例如在动画完成时执行某个操作。你可以使用 onAnimationComplete 属性来监听动画完成事件：

<motion.div
  onAnimationComplete={() => console.log('Animation completed')}
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
>
  <h1>Animation with Event Handling!</h1>
</motion.div>

6. 制作复杂动画

Framer Motion 支持复杂动画的制作，你可以将多个动画组合在一起。例如，下面的示例展示了如何同时实现旋转和平移效果：

<motion.div
  initial={{ rotate: 0, x: -100 }}
  animate={{ rotate: 360, x: 100 }}
  transition={{ duration: 2 }}
>
  <h1>Complex Animation!</h1>
</motion.div>

在这个例子中，组件会在 2 秒内完成从初始位置旋转 360 度并平移到右侧 100 像素的动画。

7. 响应式动画

Framer Motion 还可以与 React 的状态管理一起使用，从而实现响应式动画。下面是一个简单的示例，展示了如何根据状态切换动画：

const App = () => {
  const [isVisible, setIsVisible] = React.useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle Box
      </button>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          <h1>Toggle Me!</h1>
        </motion.div>
      )}
    </div>
  );
};

在这个例子中，点击按钮将切换 isVisible 状态，控制盒子的显示与隐藏，同时伴随着动画效果。