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

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

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

動(dòng)畫(huà)，簡(jiǎn)單來(lái)說(shuō)，是一種通過(guò)在交互或某些事件上隨著時(shí)間的推移更新元素的屬性或尺寸來(lái)視覺(jué)上改變?cè)氐姆绞?。例如，顯示您的操作正在進(jìn)行中的加載指示器。

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

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

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

為什么選擇 Framer Motion？

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

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

Framer Motion 入門(mén)

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

npm install framer-motion

或者

npm install framer-motion

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

yarn add framer-motion

基本概念

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

Framer Motion 附帶一系列運(yùn)動(dòng)組件來(lái)創(chuàng)建 120fps 動(dòng)畫(huà)。它提供手勢(shì)支持，其中包含所有可以使用的特殊 React 組件的 HTML 元素（如motion.div）和常見(jiàn)的 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)畫(huà)行為的 initial、animate 和 exit。

<motion.div className="card" />

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

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

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

變體包括：

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

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

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

要訪問(wèn)運(yùn)動(dòng)道具，請(qǐng)?jiān)趧?chuàng)建運(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è)字符串，該字符串將創(chuàng)建自定義 DOM 元素的運(yùn)動(dòng)組件。

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

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

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

示例

褪色按鈕

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)畫(huà)過(guò)渡；該按鈕將需要一秒鐘的時(shí)間從 opacity:0 變?yōu)?opacity:1
• exit: 設(shè)置元素離開(kāi)視口時(shí)按鈕的狀態(tài)。

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

yarn add framer-motion

AnimatePresence 影響直接子組件，這些子組件是從 React 組件樹(shù)中刪除的運(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>
  );
};

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

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

可拖動(dòng)模態(tài)

Framer Motion 還支持懸停、點(diǎn)擊和拖動(dòng)等手勢(shì)的交互式動(dòng)畫(huà)。

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

結(jié)論

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

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

請(qǐng)隨時(shí)通過(guò)我們的支持論壇、支持門(mén)戶或反饋門(mén)戶與我們聯(lián)系。我們隨時(shí)為您提供幫助！

相關(guān)博客

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

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