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

作為前端開發(fā)人員，我們的首要任務(wù)是創(chuàng)建讓用戶參與的 Web 應(yīng)用程序。這可以通過創(chuàng)建交互式頁面并提供更好的用戶體驗(yàn)來實(shí)現(xiàn)。

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

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

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

1. 通過 CSS，Animate.css 等庫提供了一組可以添加到 HTML 元素的動畫類。
2. 通過 JavaScript，像 Framer Motion 這樣的庫可以在運(yùn)行時通過代碼操縱 DOM 元素的屬性。

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

為什么選擇 Framer Motion？

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

• 易于使用： Framer Motion 憑借其直觀的 API 和方法，非常簡單且易于使用。
• 靈活性：它可用于創(chuàng)建復(fù)雜的動畫，如平移、拖動、捏合，或簡單的動畫，如淡入淡出、過渡。
• 性能：運(yùn)動組件針對性能進(jìn)行了優(yōu)化，因?yàn)樗鼈冊?React 生命周期之外渲染，以平穩(wěn)運(yùn)行并確保無縫的用戶體驗(yàn)。
• 社區(qū)和支持：廣泛的文檔、大量示例以及社區(qū)的廣泛采用使入門變得更加容易。

Framer Motion 入門

使用 npm 或 yarn 包管理器將 Framer Motion 庫添加到您的項(xiàng)目中。

npm install framer-motion

或者

npm install framer-motion

加載依賴項(xiàng)后，您可以將其包含在項(xiàng)目中以創(chuàng)建交互式動畫。

yarn add framer-motion

基本概念

運(yùn)動組件：

Framer Motion 附帶一系列運(yùn)動組件來創(chuàng)建 120fps 動畫。它提供手勢支持，其中包含所有可以使用的特殊 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，例如定義動畫行為的 initial、animate 和 exit。

<motion.div className="card" />

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

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

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

變體包括：

• listVariants: 定義整個列表的動畫行為，我們在將訪問其觸發(fā)時的屬性的道具上傳遞變體值。 初始=“隱藏”和動畫=“可見”。 staggerChildren 確保子元素按順序動畫。
• itemVariants: 定義列表項(xiàng)的動畫行為。
• motion.ul 和 motion.li 組件繼承變體以創(chuàng)建協(xié)調(diào)的動畫。

自定義組件：任何 React 組件都可以通過將其傳遞給 motion.create() 函數(shù)來轉(zhuǎn)換為運(yùn)動組件。

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

默認(rèn)情況下，所有運(yùn)動道具在傳遞給 React 組件時都會被過濾掉。動畫將應(yīng)用于組件，但您無法訪問 React 中的 props。

要訪問運(yùn)動道具，請?jiān)趧?chuàng)建運(yùn)動組件時傳遞標(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ù)還接受一個字符串，該字符串將創(chuàng)建自定義 DOM 元素的運(yùn)動組件。

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

注意：避免在 React 生命周期方法中使用 motion.create()，因?yàn)檫@會每次觸發(fā)生命周期方法時都會創(chuàng)建一個新組件。

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

示例

褪色按鈕

npm install framer-motion

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

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

yarn add framer-motion

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

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

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

過渡 道具在動畫中起著至關(guān)重要的作用。它們控制動畫隨時間的進(jìn)展方式。 Framer Motion 支持多種屬性以實(shí)現(xiàn)流暢的動畫。

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

可拖動模態(tài)

Framer Motion 還支持懸停、點(diǎn)擊和拖動等手勢的交互式動畫。

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)動動畫包裹子組件。
• Initial, animate, & exit: 處理動畫的出現(xiàn)和消失頁面導(dǎo)航上的組件。

結(jié)論

感謝您的閱讀！ Framer Motion 是一個功能強(qiáng)大的動畫庫，可以更輕松地向 React 組件添加令人驚嘆的動畫。它可以幫助您創(chuàng)建簡單的動畫來處理復(fù)雜的基于手勢的交互。 Framer Motion 為您的 React 應(yīng)用程序添加交互有無限的可能性。

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

請隨時通過我們的支持論壇、支持門戶或反饋門戶與我們聯(lián)系。我們隨時為您提供幫助！

相關(guān)博客

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

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