成人 a v天堂,丰满少妇猛烈a片免费看观看

首頁

web前端

js教程

輕松的 React 動(dòng)畫：Framer 運(yùn)動(dòng)指南

Linda Hamilton

Jan 23, 2025 pm 10:39 PM

Effortless React Animation: A Guide to Framer Motion

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

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

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

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

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

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

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

為什么選擇 Framer Motion？

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

易于使用： Framer Motion 憑借其直觀的 API 和方法，非常簡(jiǎn)單且易于使用。
靈活性：它可用于創(chuàng)建復(fù)雜的動(dòng)畫，如平移、拖動(dòng)、捏合，或簡(jiǎn)單的動(dòng)畫，如淡入淡出、過渡。
性能：運(yùn)動(dòng)組件針對(duì)性能進(jìn)行了優(yōu)化，因?yàn)樗鼈冊(cè)?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)建交互式動(dòng)畫。

yarn add framer-motion

基本概念

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

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

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

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

變體包括：

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

自定義組件：任何 React 組件都可以通過將其傳遞給 motion.create() 函數(shù)來轉(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ì)被過濾掉。動(dòng)畫將應(yīng)用于組件，但您無法訪問 React 中的 props。

要訪問運(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，讓我們看一些如何將其用于常見動(dòng)畫的示例。

示例

褪色按鈕

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

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

yarn add framer-motion

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

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

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

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

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

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

結(jié)論

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

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

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