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