【前言】
一如往常先來回顧一下 Day2 Project 分析的使用者流程。今天來做登入頁面，第三步的**「登入介面」，還有第四步的「登入成功畫面」**！因為之前學習前端三巨頭還有 React 的課後練習就已經是拿這個部分來實作了，所以今天應該會比較輕鬆吧，對吧…希望是如此。
【（使用者看見的）前端與（後方運作的）後端】
【登入介面】
延續上次的恐龍登入介面：
先來加個背景動畫，這個背景把一個漸層背景圖放得很大，並且藉由移動背景圖的位置來製造變色的效果，如果把時間拉得長一點還會有呼吸燈的效果。
import styled from "styled-components";
export const Wrapper = styled.section`
...
background: linear-gradient(#141e30, #243b55);
...
display: flex;
background-size: 1000% 1000%;
animation: gradient 10s ease infinite;
@keyframes gradient {
0%{background-position:0% 0%}
50%{background-position:100% 100%}
100%{background-position:0% 0%}
}
`;
按下去 Enter 之後，進入 Loading 頁面！這邊我使用的是 react-text-transition 這個套件來製作文字轉換的效果，裡面有很多常用的動畫可以使用。首先下載套件：
npm install -S react-text-transition
製造陣列儲存想要呈現的文字方塊。
const TEXTS = [
"Good morning! Ladies and gentlemen,",
"Welcome aboard 「Dino Spaceline」 flight 「7721」",
"We expect Landing at 「Dino Club Airport」...",
"Please remain seated until the Fasten Seat Belt sign turned off,",
"and check around your seat for any personal belongings.",
"We hope you enjoy the flight! Thank you!"
];
const paragraphs = [
"The number of the DINO Design.Team is 3 and Dev.Team is 4.",
"The Currency circulated here is DINO Coin.",
"There are still lots of alive DINO that haven’t been discovered by human on Earth yet.",
"DINO weekly magazine comes off the press once a week."
];
首先從 react-text-transition import 需要的物件。並且在 export function 裡面初始化 state。如果不想使用 React.useState 也可以在一開始 import useState 這個 FUNCTION from React。
import TextTransition, { presets } from "react-text-transition";
export function LoaderTEXT(props) {
const [index1, setIndex1] = React.useState(0);
const [index2, setIndex2] = React.useState(0);
...
return (
...
);
}
使用 useEffect() 來設定時間間隔，藉每經過一段時間就對陣列 index += 1 來更換當前呈現的文字。
export function LoaderTEXT(props) {
...
React.useEffect(() => {
const intervalId1 = setInterval(() =>
setIndex1(index1 => index1 + 1),
3000
);
const intervalId2 = setInterval(() =>
setIndex2(index2 => index2 + 1),
5000
);
return () => {
clearTimeout(intervalId1)
clearTimeout(intervalId2)};
}, []);
return (
...
);
}
裡用 TextTransition 來呈現陣列裡面的文字，除了可以更改內容、動畫，還可以對 CSS 進行修改。
export function LoaderTEXT(props) {
...
return (
<Box>
<h1>
<TextTransition
text={ TEXTS[index1 % TEXTS.length] }
springConfig={ presets.wobbly }
style={{
"color": "white",
"text-shadow": "0 0 20px #00b3ff"}} />
</h1>
<div>
<Head>Do you know?</Head>
<TextTransition
text={ paragraphs[index2 % paragraphs.length]}
springConfig={presets.gentle}
overflow
style={{ "color": "white" }} />
</div>
</Box>
);
}
【登入成功畫面】
持有驗證完畢之後會顯示「Verified Successfully!」字樣，這裡一樣先初始化 useState() 的使用以及以 useEffect() 設定呈現的時間間隔。
export function VIP(props) {
const [isPending, setIsPending] = useState(true);
const [isVering, setIsVering] = useState(false);
useEffect(() => {
setTimeout(() => {
setIsPending(false);
setIsVering(true);
}, 18000);
}, [])
useEffect(() => {
setTimeout(() => {
setIsVering(false);
}, 21000);
}, [])
return (
...
);
}
要注意的有幾點，首先是 isVering 因為是「Verified Successfully!」字樣，而在 Loading 特效時我們是不會出現驗證成功的，所以一開始要初始化為 False。再來是在一定的時間且 isPending 為 false 時把 IsVering 應改為 true 來呈現正確的結果。
return 之中我使用三元運算子 condition ? exprIfTrue : exprIfFalse 來決定當前呈現的物件。
export function VIP(props) {
...
return (
<Wrapper>
{ isPending && <LoaderTEXT /> }
{ (!isPending && isVering)
?
<VerifiedSuc>Verified Successfully!</VerifiedSuc>
:
...
}
</Wrapper>
);
}
【小結】
Project 的難度越來越高了，不過目前算是暫時結束前端囉。感覺自己目前的表現還算可圈可點，只是很多想做的事情因為對 React 不熟悉所以沒辦法實作，像是我搞了很久的思考怎麼在 JavsScript 的匿名函式裡面 return 多個回傳值或物件。希望之後我可以繼續精進前端的部分。明天開始就要進入 MetaMask 以及 Ethereum 的懷抱啦！雖然還是會使用到大量的 React 不過不能畏懼，要繼續加油！
【參考資料】
react-text-transition
9+ Free React Templates - Material-UI
Animation - React.js Examples
20 Fun Dinosaur Facts for Kids
How is () => {...} different from () =>
iThome鐵人賽
看影片追技術