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.divvariants={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.divinitial={{ 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>);
}