搜尋
首頁web前端js教程輕鬆的 React 動畫:Framer 運動指南

Effortless React Animation: A Guide to Framer Motion

TL;DR: 這篇部落格文章提供了使用 React 動畫庫 Framer Motion 的全面指南。它涵蓋了運動組件、變體和過渡等關鍵概念,並提供了創建淡入淡出按鈕、滑入側邊欄、可拖曳模式和卡片翻轉動畫的實際範例。

身為前端開發人員,我們的首要任務是建立讓使用者參與的 Web 應用程式。這可以透過建立互動式頁面並提供更好的使用者體驗來實現。

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

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

有兩種方法可以為網頁上的元素設定動畫(兩種更改元素屬性的方法)。

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

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

為什麼選擇 Framer Motion?

Framer Motion 是一個用於 React 的生產就緒動畫庫,它透過其聲明性語法創建簡單的動畫(例如過渡)和複雜的基於手勢的互動。它的特點是:

  • 易於使用: Framer Motion 憑藉其直覺的 API 和方法,非常簡單且易於使用。
  • 靈活性:它可用於創建複雜的動畫,如平移、拖曳、捏合,或簡單的動畫,如淡入淡出、過渡。
  • 效能:運動組件針對效能進行了最佳化,因為它們在 React 生命週期之外渲染,以平穩運行並確保無縫的使用者體驗。
  • 社群與支援:廣泛的文件、大量範例以及社群的廣泛採用使入門變得更加容易。

Framer Motion 入門

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

npm install framer-motion


npm install framer-motion

載入相依性後,您可以將其包含在專案中以建立互動式動畫。

yarn add framer-motion

基本概念

運動組件:

Framer Motion 附帶一系列運動組件來創建 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,例如定義動畫行為的 initialanimateexit

<motion.div classname="card"></motion.div>

Initial 屬性在元件掛載時觸發,animate 在元件更新時觸發,exit 屬性在元件卸載時觸發。有關更多詳細信息,請參閱完整的 Framer Motion 動畫指南。

運動元件獨立於 React 生命週期或渲染週期,以提高效能。因此,我們應該依賴 React 狀態來實現動畫,而不是使用運動值來更新樣式而不觸發重新渲染。

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

變異體包括:

  • listVariants: 定義整個清單的動畫行為,我們在將存取其觸發時的屬性的道具上傳遞變體值。 初始=「隱藏」動畫=「可見」staggerChildren 確保子元素依序動畫。
  • itemVariants: 定義清單項目的動畫行為。
  • motion.ulmotion.li 組件繼承變體以創建協調的動畫。

自訂元件:任何 React 元件都可以透過將其傳遞給 motion.create() 函數來轉換為運動元件。

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。

要存取運動道具,請在建立運動組件時傳遞標誌 forwardMotionProps: true

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

const MotionComponent = motion.create(ReactComponent);

const FadingButton2 = () => {
  return (
    <motioncomponent initial="{{" opacity: animate="{{" exit="{{" transition="{{" duration:>
    Click Me
    </motioncomponent>
  );
};

</button>

motion.create() 函數也接受一個字串,該字串將建立自訂 DOM 元素的運動組件。

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

注意:避免在React 生命週期方法中使用motion.create(),因為這會每次觸發生命週期方法時都會建立一個新元件。

現在您已經了解了 Framer Motion 的工作原理及其 API,讓我們來看看一些如何將其用於常見動畫的範例。

範例

褪色按鈕

npm install framer-motion
  • initial: 當元素不是視口時,設定按鈕 opacity:0 的初始狀態。
  • animate: 當元素位於視窗中時,將按鈕的狀態設為 opacity:1
  • transition: 配置動畫過渡;該按鈕將需要一秒鐘的時間從 opacity:0 變為 opacity:1
  • exit: 設定元素離開視口時按鈕的狀態。

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

yarn add framer-motion

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

這可能是當元件根據生命週期變更(安裝、更新、卸載)進行更新時

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

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

更改

<motion.div classname="card"></motion.div>

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

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

滑入式側邊欄

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

過渡 道具在動畫中扮演至關重要的角色。它們控制動畫隨時間的進展方式。 Framer Motion 支援多種屬性以實現流暢的動畫。

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

可拖曳模態

Framer Motion 也支援懸停、點擊和拖曳等手勢的互動式動畫。

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

const MotionComponent = motion.create(ReactComponent);

const FadingButton2 = () => {
  return (
    <motioncomponent initial="{{" opacity: animate="{{" exit="{{" transition="{{" duration:>
    Click Me
    </motioncomponent>
  );
};

</button>
  • Page: 用運動動畫包裹子組件。
  • Initial, animate, & exit: 處理動畫出現和消失頁導航上的組件。
結論

感謝您的閱讀! Framer Motion 是一個功能強大的動畫庫,可以更輕鬆地在 React 元件中添加令人驚嘆的動畫。它可以幫助您創建簡單的動畫來處理複雜的基於手勢的互動。 Framer Motion 為您的 React 應用程式添加互動有無限的可能性。

Essential Studio® 的新版本可在許可證和下載頁面上供現有客戶使用。如果您是新用戶,請註冊我們的 30 天免費試用版以探索我們的功能。

請隨時透過我們的支援論壇、支援入口網站或回饋入口網站與我們聯繫。我們隨時為您提供協助!

相關部落格

  • 可實現流暢文件處理的前 5 個 React PDF 檢視器
  • 2025 年前 5 名的 React 圖表庫
  • Vite.js:建立更快的前端
  • React 的 RxJS:解鎖反應狀態

以上是輕鬆的 React 動畫:Framer 運動指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
node.js流帶打字稿node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O,這在很大程度上要歸功於流。 流媒體匯總處理數據,避免內存過載 - 大型文件,網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript:性能和效率注意事項Python vs. JavaScript:性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在:1)Python作為解釋型語言,運行速度較慢,但開發效率高,適合快速原型開發;2)JavaScript在瀏覽器中受限於單線程,但在Node.js中可利用多線程和異步I/O提升性能,兩者在實際項目中各有優勢。

JavaScript的起源:探索其實施語言JavaScript的起源:探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年,由布蘭登·艾克創造,實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後:什麼語言能力JavaScript?幕後:什麼語言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行,依賴JavaScript引擎解析和執行代碼。 1)解析階段生成抽象語法樹(AST);2)編譯階段將AST轉換為字節碼或機器碼;3)執行階段執行編譯後的代碼。

Python和JavaScript的未來:趨勢和預測Python和JavaScript的未來:趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括:1.Python將鞏固在科學計算和AI領域的地位,2.JavaScript將推動Web技術發展,3.跨平台開發將成為熱門,4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景,並在性能上有更多突破。

Python vs. JavaScript:開發環境和工具Python vs. JavaScript:開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。