輕鬆的 React 動畫：Framer 運動指南-js教程-PHP中文網

Effortless React Animation: A Guide to Framer Motion

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

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

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

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

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

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

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

為什麼選擇 Framer Motion？

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

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

Framer Motion 入門

使用 npm 或 yarn 套件管理器將 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，例如定義動畫行為的 initial、animate 和 exit。

<motion.div className="card" />

登入後複製

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

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

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

登入後複製

變異體包括：

listVariants: 定義整個清單的動畫行為，我們在將存取其觸發時的屬性的道具上傳遞變體值。 初始=「隱藏」和動畫=「可見」。 staggerChildren 確保子元素依序動畫。
itemVariants: 定義清單項目的動畫行為。
motion.ul 和 motion.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 {...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() 函數也接受一個字串，該字串將建立自訂 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.button
  initial={{opacity: 0}}
  animate={{opacity: 1}}
  transition={{duration: 1}}
  exit={{opacity: 0}}
>
  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 {...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>
  );
};

登入後複製