資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 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 中為操作按鈕製作動畫的過程。我們討論了建立這些按鈕的步驟以及如何應用各種動畫（如縮放、增長、淡入等）以增加吸引力。透過加入這些動畫，您的應用程式將變得更具視覺吸引力，並提高使用者參與度，從而提高您網站的使用者參與度。
239 次瀏覽
