什么是 Framer Motion

Framer Motion 是一个用于 React 应用程序的动画库，它提供了一套简单而强大的工具，用于实现在 Web 应用中创建流畅的动画和交互效果。

声明式动画

Framer Motion 支持声明式的动画定义。通过在组件中使用 JSX 语法，你可以轻松地声明需要应用的动画效果，而不必直接操作 DOM 或编写复杂的动画代码。

1
2
3
4
5
6
7
8
9
10
import { motion } from "framer-motion";

const ExampleComponent = () => {
  return (
    <motion.div animate={{ x: 100, opacity: 0.5 }}>
      Hello, Framer Motion!
    </motion.div>
  );
};

Variants

通过 variants 属性，你可以定义一组状态变化，并在动画中切换这些状态。这样可以更灵活地管理和控制动画效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
const variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
};

const ExampleComponent = () => {
  return (
    <motion.div variants={variants} initial="hidden" animate="visible">
      Hello, Framer Motion!
    </motion.div>
  );
};

过渡

Framer Motion 支持过渡效果，你可以定义元素从一个状态平滑过渡到另一个状态的动画效果。

1
2
3
4
5
6
7
8
9
10
11
12
const ExampleComponent = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      Hello, Framer Motion!
    </motion.div>
  );
};

Layout 动画

Framer Motion 允许你轻松实现与布局相关的动画，例如元素的位置、大小等变化。

1
2
3
4
5
6
7
8
const ExampleComponent = () => {
  return (
    <motion.div layout>
      <p>Content</p>
    </motion.div>
  );
};