Framer Motion简介

Framer Motion 是什么？

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

🚀 为什么选择 Framer Motion？

✅ 简单易用

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

✅ 声明式动画

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

✅ 高性能

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

✅ 手势交互

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

✅ 与 React 深度集成

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

✅ SVG 动画支持

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

🧠 核心概念