TL;DR: 這篇部落格文章提供了使用 React 動(dòng)畫庫 Framer Motion 的全面指南。它涵蓋了運(yùn)動(dòng)組件、變體和過渡等關(guān)鍵概念，並提供了創(chuàng)建淡入淡出按鈕、滑入側(cè)邊欄、可拖曳模式和卡片翻轉(zhuǎn)動(dòng)畫的實(shí)際範(fàn)例。

身為前端開發(fā)人員，我們的首要任務(wù)是建立讓使用者參與的 Web 應(yīng)用程式。這可以透過建立互動(dòng)式頁面並提供更好的使用者體驗(yàn)來實(shí)現(xiàn)。

動(dòng)畫使您的頁面具有互動(dòng)性；它們引導(dǎo)使用者並使互動(dòng)變得有趣。頁面上的微小視覺動(dòng)作，例如用戶互動(dòng)或事件或頁面導(dǎo)航，給人一種活潑的感覺，就像我們正在與一個(gè)響應(yīng)我們的動(dòng)作的生物進(jìn)行互動(dòng)。

動(dòng)畫，簡單來說，是一種透過在互動(dòng)或某些事件上隨著時(shí)間的推移更新元素的屬性或尺寸來視覺上改變元素的方式。例如，顯示您的操作正在進(jìn)行中的載入指示器。

有兩種方法可以為網(wǎng)頁上的元素設(shè)定動(dòng)畫（兩種更改元素屬性的方法）。

1. 透過 CSS，Animate.css 等函式庫提供了一組可以加入 HTML 元素的動(dòng)畫類別。
2. 透過 JavaScript，像 Framer Motion 這樣的函式庫可以在執(zhí)行時(shí)透過程式碼操縱 DOM 元素的屬性。

在本文中，我們將探索 Framer Motion，這是最受歡迎的動(dòng)畫庫之一。它提供簡單性和靈活性，旨在與 React 等現(xiàn)代前端框架配合使用。

為什麼選擇 Framer Motion？

Framer Motion 是一個(gè)用於 React 的生產(chǎn)就緒動(dòng)畫庫，它透過其聲明性語法創(chuàng)建簡單的動(dòng)畫（例如過渡）和複雜的基於手勢的互動(dòng)。它的特點(diǎn)是：

• 易於使用： Framer Motion 憑藉其直覺的 API 和方法，非常簡單且易於使用。
• 靈活性：它可用於創(chuàng)建複雜的動(dòng)畫，如平移、拖曳、捏合，或簡單的動(dòng)畫，如淡入淡出、過渡。
• 效能：運(yùn)動(dòng)組件針對效能進(jìn)行了最佳化，因?yàn)樗鼈冊?React 生命週期之外渲染，以平穩(wěn)運(yùn)行並確保無縫的使用者體驗(yàn)。
• 社群與支援：廣泛的文件、大量範(fàn)例以及社群的廣泛採用使入門變得更加容易。

Framer Motion 入門

使用 npm 或 yarn 套件管理器將 Framer Motion 庫新增至您的專案中。

npm install framer-motion

或

npm install framer-motion

載入相依性後，您可以將其包含在專案中以建立互動(dòng)式動(dòng)畫。

yarn add framer-motion

基本概念

運(yùn)動(dòng)組件：

Framer Motion 附帶一系列運(yùn)動(dòng)組件來創(chuàng)建 120fps 動(dòng)畫。它提供手勢支持，其中包含所有可使用的特殊 React 元件的 HTML 元素（如motion.div）和常見的 SVG 元素（如motion.square）。

// On Client side
import { motion } from "motion/react"

// On Server-side 
import * as motion from "motion/react-client"

道具與 API：

Framer Motion 提供了一系列 API 作為 props，例如定義動(dòng)畫行為的 initial、animate 和 exit。

<motion.div className="card" />

Initial 屬性在元件掛載時(shí)觸發(fā)，animate 在元件更新時(shí)觸發(fā)，exit 屬性在元件卸載時(shí)觸發(fā)。有關(guān)更多詳細(xì)信息，請參閱完整的 Framer Motion 動(dòng)畫指南。

運(yùn)動(dòng)元件獨(dú)立於 React 生命週期或渲染週期，以提高效能。因此，我們應(yīng)該依賴 React 狀態(tài)來實(shí)現(xiàn)動(dòng)畫，而不是使用運(yùn)動(dòng)值來更新樣式而不觸發(fā)重新渲染。

<motion.button
  initial={{opacity: 0}}
  animate={{opacity: 1}}
  transition={{duration: 1}}
  exit={{opacity: 0}}
>
  Click Me
</motion.button>

變異體包括：

• listVariants: 定義整個(gè)清單的動(dòng)畫行為，我們在將存取其觸發(fā)時(shí)的屬性的道具上傳遞變體值。 初始=「隱藏」和動(dòng)畫=「可見」。 staggerChildren 確保子元素依序動(dòng)畫。
• itemVariants: 定義清單項(xiàng)目的動(dòng)畫行為。
• motion.ul 和 motion.li 組件繼承變體以創(chuàng)建協(xié)調(diào)的動(dòng)畫。

自訂元件：任何 React 元件都可以透過將其傳遞給 motion.create() 函數(shù)來轉(zhuǎn)換為運(yùn)動(dòng)元件。

import { motion, useMotionValue } from "framer-motion";

const MotionState = () => {
  const xPosition = useMotionValue(0);

  useEffect(() => {
    // It won’t trigger a re-render on the component
    const interval = setInterval(() => {
    xPosition.set(xPosition.get() + 100);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <motion.div
   >



<p>In the previous example, the <strong>motion.div</strong> element will be translated by 100px on the x position (horizontally, translateX(100px)) at an interval of 1s.</p>

<p><strong>Variants:</strong> framer-motion provides support for the variants, which allows the reuse of animation configurations across multiple elements.<br>
</p>

<pre class="brush:php;toolbar:false">const AnimatedList = () => {
  const listVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
       opacity: 1,
       y: 0,
       transition: {
           staggerChildren: 0.2,
      },
    },
  };

  const itemVariants = {
      visible: { opacity: 1 },
    hidden: { opacity: 0 },
  };

  return (
    <motion.ul initial="hidden" animate="visible" variants={listVariants}>
    {[1, 2, 3].map((item) => (
        <motion.li key={item} variants={itemVariants}>
        Item {item}
        </motion.li>
    ))}
    </motion.ul>
  );
};

預(yù)設(shè)情況下，所有運(yùn)動(dòng)道具在傳遞給 React 元件時(shí)都會(huì)被過濾掉。動(dòng)畫將應(yīng)用於元件，但您無法存取 React 中的 props。

要存取運(yùn)動(dòng)道具，請?jiān)诮⑦\(yùn)動(dòng)組件時(shí)傳遞標(biāo)誌 forwardMotionProps: true。

const ReactComponent = (props) => {
  return <button {...props}>ClickMe>/button>;
};

const MotionComponent = motion.create(ReactComponent);

const FadingButton2 = () => {
  return (
    <MotionComponent
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 3 }}
    >
    Click Me
    </MotionComponent>
  );
};

motion.create() 函數(shù)也接受一個(gè)字串，該字串將建立自訂 DOM 元素的運(yùn)動(dòng)組件。

const MotionComponent = motion.create(ReactComponent, {
  forwardMotionProps: true,
});

注意：避免在React 生命週期方法中使用motion.create()，因?yàn)檫@會(huì)每次觸發(fā)生命週期方法時(shí)都會(huì)建立一個(gè)新元件。

現(xiàn)在您已經(jīng)了解了 Framer Motion 的工作原理及其 API，讓我們來看看一些如何將其用於常見動(dòng)畫的範(fàn)例。

範(fàn)例

褪色按鈕

npm install framer-motion

• initial: 當(dāng)元素不是視口時(shí)，設(shè)定按鈕 opacity:0 的初始狀態(tài)。
• animate: 當(dāng)元素位於視窗中時(shí)，將按鈕的狀態(tài)設(shè)為 opacity:1。
• transition: 配置動(dòng)畫過渡；該按鈕將需要一秒鐘的時(shí)間從 opacity:0 變?yōu)?opacity:1
• exit: 設(shè)定元素離開視口時(shí)按鈕的狀態(tài)。

exit 屬性僅在封裝在 AnimatePresence 組件中時(shí)才生效。

yarn add framer-motion

AnimatePresence 影響直接子組件，這些子組件是從 React 組件樹中刪除的運(yùn)動(dòng)組件。

這可能是當(dāng)元件根據(jù)生命週期變更（安裝、更新、卸載）進(jìn)行更新時(shí)

// On Client side
import { motion } from "motion/react"

// On Server-side 
import * as motion from "motion/react-client"

其鍵更改

<motion.div className="card" />

孩子被加入到清單中或從清單中刪除。

<motion.button
  initial={{opacity: 0}}
  animate={{opacity: 1}}
  transition={{duration: 1}}
  exit={{opacity: 0}}
>
  Click Me
</motion.button>

滑入式側(cè)邊欄

import { motion, useMotionValue } from "framer-motion";

const MotionState = () => {
  const xPosition = useMotionValue(0);

  useEffect(() => {
    // It won’t trigger a re-render on the component
    const interval = setInterval(() => {
    xPosition.set(xPosition.get() + 100);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <motion.div
   >



<p>In the previous example, the <strong>motion.div</strong> element will be translated by 100px on the x position (horizontally, translateX(100px)) at an interval of 1s.</p>

<p><strong>Variants:</strong> framer-motion provides support for the variants, which allows the reuse of animation configurations across multiple elements.<br>
</p>

<pre class="brush:php;toolbar:false">const AnimatedList = () => {
  const listVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
       opacity: 1,
       y: 0,
       transition: {
           staggerChildren: 0.2,
      },
    },
  };

  const itemVariants = {
      visible: { opacity: 1 },
    hidden: { opacity: 0 },
  };

  return (
    <motion.ul initial="hidden" animate="visible" variants={listVariants}>
    {[1, 2, 3].map((item) => (
        <motion.li key={item} variants={itemVariants}>
        Item {item}
        </motion.li>
    ))}
    </motion.ul>
  );
};

過渡 道具在動(dòng)畫中扮演至關(guān)重要的角色。它們控制動(dòng)畫隨時(shí)間的進(jìn)展方式。 Framer Motion 支援多種屬性以實(shí)現(xiàn)流暢的動(dòng)畫。

• 持續(xù)時(shí)間： 動(dòng)畫的長度（以秒為單位）
• 延遲： 延遲動(dòng)畫的開始（以秒為單位）
• ease： 一組緩動(dòng)函數(shù)，提倡動(dòng)畫如何進(jìn)行（‘ease’、‘easeIn’、‘easeInOut’）

可拖曳模態(tài)

Framer Motion 也支援懸停、點(diǎn)擊和拖曳等手勢的互動(dòng)式動(dòng)畫。

const ReactComponent = (props) => {
  return <button {...props}>ClickMe>/button>;
};

const MotionComponent = motion.create(ReactComponent);

const FadingButton2 = () => {
  return (
    <MotionComponent
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 3 }}
    >
    Click Me
    </MotionComponent>
  );
};

• Page: 用運(yùn)動(dòng)動(dòng)畫包裹子組件。
• Initial, animate, & exit: 處理動(dòng)畫出現(xiàn)和消失頁導(dǎo)航上的組件。

結(jié)論

感謝您的閱讀！ Framer Motion 是一個(gè)功能強(qiáng)大的動(dòng)畫庫，可以更輕鬆地在 React 元件中添加令人驚嘆的動(dòng)畫。它可以幫助您創(chuàng)建簡單的動(dòng)畫來處理複雜的基於手勢的互動(dòng)。 Framer Motion 為您的 React 應(yīng)用程式添加互動(dòng)有無限的可能性。

Essential Studio? 的新版本可在許可證和下載頁面上供現(xiàn)有客戶使用。如果您是新用戶，請?jiān)]冊我們的 30 天免費(fèi)試用版以探索我們的功能。

請隨時(shí)透過我們的支援論壇、支援入口網(wǎng)站或回饋入口網(wǎng)站與我們聯(lián)繫。我們隨時(shí)為您提供協(xié)助！

相關(guān)部落格

• 可實(shí)現(xiàn)流暢文件處理的前 5 個(gè) React PDF 檢視器
• 2025 年前 5 名的 React 圖表庫
• Vite.js：建立更快的前端
• React 的 RxJS：解鎖反應(yīng)狀態(tài)

以上是輕鬆的 React 動(dòng)畫：Framer 運(yùn)動(dòng)指南的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！