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>);
}

---

📚 小結

Framer Motion 是 React 中最現代、最強大的動畫解決方案之一，適合構建復雜的用戶界面和微交互。它 API 簡潔、性能優秀、社區活躍，是前端開發者提升界面體驗的不二之選。

---