Framer Motion简介

Framer Motion 是什么？

Framer Motion 是一个 用于 React 的现代动画库，专为创建流畅、高性能且富有表现力的动画而设计。它不仅适合简单的 UI 动效，也能优雅地实现复杂的动画编排与手势交互。

---

🚀 为什么选择 Framer Motion？

✅ 简单易用

使用 motion 组件 + 一点属性配置，即可轻松实现动画，无需写复杂的 DOM 操作或 CSS 动画。

✅ 声明式动画

通过设置 initial、animate、exit 等属性直接声明动画的状态转换，逻辑清晰、可读性强。

✅ 高性能

底层采用 requestAnimationFrame 和优化的渲染方式，确保动画流畅不卡顿。

✅ 手势交互

内置手势支持（拖拽、缩放、轻扫等），无需额外引入库。

✅ 与 React 深度集成

原生 React 体验，不破坏组件结构，支持 SSR，适配 Next.js 等框架。

✅ SVG 动画支持

直接对 SVG 元素进行路径、变形、旋转等动画控制。

---

🧠 核心概念

🧩 motion 组件

motion.div、motion.button、motion.svg 等是具有动画能力的组件。你可以将任何 HTML 或 SVG 元素变为 motion 版本：

import { motion } from 'motion/react';

<motion.div animate={{ opacity: 1 }} />

---

✨ 动画属性详解

🔧 动画属性（Attributes）

通过 motion 组件设置以下属性来定义动画行为：

属性名	说明
initial	初始状态
animate	动画目标状态
exit	卸载动画状态（搭配 AnimatePresence 使用）
transition	动画的过渡控制参数
variants	预设的动画状态组
whileHover	鼠标悬停时的动画
whileTap	鼠标按下时的动画
drag	启用拖拽功能

🕓 transition

控制动画的速度和节奏：

transition={{
  duration: 0.5,
  ease: 'easeInOut',
  delay: 0.2,
  type: 'spring'
}}

• duration: 动画持续时间（单位秒）
• ease: 缓动函数（如 'linear', 'easeOut'，或自定义）
• delay: 延迟执行
• type: 动画类型（如 'spring', 'tween', 'inertia'）

🧬 variants

将多个动画状态预设为对象，可以统一切换：

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

<motion.div
  variants={variants}
  initial="hidden"
  animate="visible"
/>

🎛 useMotionValue

控制并追踪某个值的变化，如滚动、位置等：

const x = useMotionValue(0);
<motion.div style={{ x }} />

🔁 useTransform

将 motion 值进行映射和变换：

const opacity = useTransform(x, [0, 100], [0, 1]);

📦 AnimatePresence

控制组件的挂载与卸载时的动画，特别适合动画列表、弹窗等场景：

<AnimatePresence>
  {isVisible && (
    <motion.div exit={{ opacity: 0 }} />
  )}
</AnimatePresence>

---

🔍 示例代码

import { motion } from 'motion/react';

export default function Example() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.8 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
    >
      Hello Framer Motion!
    </motion.div>
  );
}

---

📚 小结

Framer Motion 是 React 中最现代、最强大的动画解决方案之一，适合构建复杂的用户界面和微交互。它 API 简洁、性能优秀、社区活跃，是前端开发者提升界面体验的不二之选。

---