如何在 Material UI 中建立懸浮操作按鈕動畫?


懸浮操作按鈕 (Floating action button) 是一種形狀,中心帶有一個圖示,顯示在所有螢幕內容的前面。Material UI 是一個知名的 React 元件庫,提供一系列預先設計和可自定義的 UI 元件。在這些元件中,懸浮操作按鈕 (FAB) 非常流行。

為了增強使用者體驗,我們可以為 FAB 新增動畫,使其更具視覺吸引力和參與感。在本文中,我們將探討如何在 Material UI 中為懸浮操作按鈕建立動畫。

什麼是懸浮操作按鈕?

現在讓我們瞭解一下什麼是懸浮操作按鈕。這些按鈕包含在應用程式的使用者介面中,用於表示開發人員優先考慮的操作。只有當它確實是呈現螢幕主要操作的方式時,才應使用 FAB。

通常,建議每個螢幕只有一個 FAB 用於常用操作。FAB 有兩種型別;擴充套件型。值得注意的是,懸浮操作按鈕與按鈕略有不同。

建立動畫的步驟

下面,我們概述了使用 React 在 Material UI 中為懸浮操作按鈕建立動畫的分步過程。

步驟 1:建立一個新的 React 應用並安裝 MUI

首先,讓我們從建立一個 React 應用和安裝 Material UI 開始。請按照以下步驟操作:

開啟您的終端並執行以下命令:

npx create react app projectname

專案建立後,透過執行以下命令導航到專案目錄:

cd projectname

透過執行以下命令安裝 Material UI 及其依賴項:

npm install @mui/material @emotion/react @emotion/styled

步驟 2:將所需的元件匯入 React

現在,建立新的 React 應用後,在 src 資料夾中有一個 main App.js 檔案。開啟它並匯入所需的元件。

import React from "react";
import { Fab } from '@mui/material

export default function App() {
   return (

   )
}

現在我們已經完成了建立和匯入所需元件的所有步驟。讓我們探索一些示例,這些示例說明了使用不同方法為懸浮操作按鈕建立動畫。

懸浮操作按鈕 API

  • <Fab> − 此 API 用於使用 Material UI 將懸浮操作按鈕新增到專案中。

屬性

  • children − 此屬性定義 FAB 的內容。

  • classes − 此屬性用於覆蓋或向元素新增樣式。

  • color − 此屬性用於向懸浮操作按鈕新增顏色。它包括 primary、secondary、success、info、error、warning 等。

  • component − 此屬性定義 FAB 的元件。

  • disableFocusRipple − 如果此屬性設定為 true,則鍵盤焦點將不會出現漣漪效果。

  • disabled − 此屬性用於停用 FAB。

  • disableRipple − 此屬性用於停用 FAB 的漣漪效果。

  • href − 此屬性定義單擊 FAB 時將跳轉到的 URL。

  • size − 此屬性用於更改 FAB 的大小。

  • sx − 此屬性用於向 Material UI 元件新增自定義樣式。

  • variant − 此屬性用於選擇要使用的 FAB,例如 circular、string 或 string。

示例

在本例中,我們將動畫整合到懸浮操作按鈕中。每當我們切換開關時,懸浮操作按鈕都會伴隨著這些動畫效果優雅地出現。

import { Box, Fab, FormControlLabel, Switch } from "@mui/material";
import React, { useState } from "react";
import Zoom from "@mui/material/Zoom";
import { Add } from "@mui/icons-material";

export default function App() {
   const [checked, setChecked] = useState(false);
   const handleAnimate = () => {
      setChecked((pr) => !pr);
   };

   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <FormControlLabel
            control={<Switch checked={checked} onChange={handleAnimate} />}
            label="Animate FAB"
         />
         <Box sx={{ display: "flex", gap: 10 }}>
            <Zoom in={checked}>
               <Fab color="info" size="medium">
                  <Add />
               </Fab>
            </Zoom>
            <Zoom in={checked}>
               <Fab color="info" size="medium">
                  <Add />
               </Fab>
            </Zoom>
         </Box>
      </div>
   );
}

輸出

示例

在本例中,我們向懸浮操作按鈕添加了三種不同的動畫。當我們單擊開關時,懸浮操作按鈕會分別以淡入、縮放和增長動畫彈出。

import { Box, Fab, Fade, FormControlLabel, Grow, Switch, Zoom } from "@mui/material";
import React, { useState } from "react";
import { Add } from "@mui/icons-material";

export default function App() {  
   const [checked, setChecked] = useState(false);
   const handleAnimate = () => {
      setChecked((pr) => !pr);
   };

   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <FormControlLabel
            control={<Switch checked={checked} onChange={handleAnimate} />}
            label="Animate FAB"
         />
         <Box sx={{ display: "flex", gap: 10 }}>
         
            {/* Fade animation of floating action button */}
            <Fade in={checked}>
               <Fab color="info" size="medium">
                  <Add />
               </Fab>
            </Fade>
            
            {/* Zoom animation of floating action button */}
            <Zoom in={checked}>
               <Fab color="info" size="medium">
                  <Add />
               </Fab>
            </Zoom>
            
            {/* Grow animation of floating action button */}
            <Grow in={checked}>
               <Fab color="info" size="medium">
                  <Add />
               </Fab>
            </Grow>
         </Box>
      </div>
   );
}

輸出

示例

在本例中,我們將動畫整合到懸浮操作按鈕中。為此,我們利用 react swipeable views 庫建立了兩個選項卡。每當單擊選項卡時,懸浮操作按鈕都會以淡入動畫平滑過渡。

import React from "react";
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import { useTheme } from "@mui/material/styles";
import AppBar from "@mui/material/AppBar";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Fab from "@mui/material/Fab";
import Typography from "@mui/material/Typography";

import { useState } from "react";
import { Add } from "@mui/icons-material";
import { Fade } from "@mui/material";

function MyCustomTab({ children: items, value, index, ...other }) {
   return (
      <Typography component="div" hidden={value !== index} {...other}>
         {value === index && (
            <span style={{ fontSize: 20, color: "green", padding: 4 }}>
               {items}
            </span>
         )}
      </Typography>
   );
}

MyCustomTab.propTypes = {
   children: PropTypes.node,
   index: PropTypes.number.isRequired,
   value: PropTypes.number.isRequired,
};

export default function App() {
   const [val, setVal] = useState(0);
   const theme = useTheme();

   const handleChange = (event, newValue) => {
      setVal(newValue);
   };

   const handleAnimateIdx = (idx) => {
      setVal(idx);
   };

   const transitionDuration = {
      enter: theme.transitions.duration.enteringScreen,
      exit: theme.transitions.duration.leavingScreen,
   };

   const fabData = [
      {
         id: 1,
      },
      {
         id: 2,
      },
   ];

   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <div
            style={{
               backgroundColor: "white",
               width: 500,
               position: "relative",
               height: 300,
            }}>
            <AppBar color="inherit" position="static">
               <Tabs
                  value={val}
                  onChange={handleChange}
                  indicatorColor="primary"
                  textColor="secondary"
                  variant="fullWidth"
               >
                  <Tab label="Java" />
                  <Tab label="C++" />
               </Tabs>
            </AppBar>
            <SwipeableViews
               axis={theme.direction === "rtl" ? "x-reverse" : "x"}
               index={val}
               onChangeIndex={handleAnimateIdx}
            >
               <MyCustomTab value={val} index={0} dir={theme.direction}>
                  Java
               </MyCustomTab>
               <MyCustomTab value={val} index={1} dir={theme.direction}>
                  C++
               </MyCustomTab>
            </SwipeableViews>
            {fabData.map((fab, index) => (
               <Fade
                  key={fab.id}
                  in={val === index}
                  timeout={transitionDuration}
                  style={{
                     transitionDelay: `${
                        val === index ? transitionDuration.exit : 0
                     }ms`,
                  }}
                  unmountOnExit
               >
                  <Fab
                     sx={{ position: "absolute", bottom: 16, right: 16 }}
                     color="success"
                  >
                     <Add />
                  </Fab>
               </Fade>
            ))}
         </div>
      </div>
   );
}

輸出

結論

在本文中,我們探討了使用 React 在 Material UI 中為操作按鈕製作動畫的過程。我們討論了建立這些按鈕的步驟以及如何應用各種動畫(如縮放、增長、淡入等)以增加吸引力。透過加入這些動畫,您的應用程式將變得更具視覺吸引力,並提高使用者參與度,從而提高您網站的使用者參與度。

更新於:2023年10月30日

239 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告