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

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

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

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

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

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

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

為什么選擇 Framer Motion？

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

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

Framer Motion 入門

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

npm install framer-motion

或者

npm install framer-motion

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

yarn add framer-motion

基本概念

運動組件：

Framer Motion 附帶一系列運動組件來創(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)更多詳細信息，請參閱完整的 Framer Motion 動畫指南。

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

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

變體包括：

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

自定義組件：任何 React 組件都可以通過將其傳遞給 motion.create() 函數(shù)來轉(zhuǎ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>
  );
};

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

要訪問運動道具，請在創(chuàng)建運動組件時傳遞標志 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 元素的運動組件。

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

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

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

示例

褪色按鈕

npm install framer-motion

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

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

yarn add framer-motion

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

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

// 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)重要的作用。它們控制動畫隨時間的進展方式。 Framer Motion 支持多種屬性以實現(xiàn)流暢的動畫。

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

可拖動模態(tài)

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

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

結(jié)論

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

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

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

相關(guān)博客

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

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