React 寫一個 spinner 圓形載入動畫
阿新 • • 發佈:2019-01-14
寫在最前面
- 最近業務和設計稿需要需要寫一個載入的動畫,然後就決定構建一個 react 的 spinner 圓圈⭕️旋轉的載入動畫。
- 關鍵Key: react,css3 clip-path
先來看看需要實現的效果
css3 clip path
- 這裡我們來了解一下 clip-path 的使用方法,最開始這個屬性是 clip 然後最近改用了 clip-path.
相容性
- 首先看看瀏覽器適配問題
- 不支援IE和Firefox,支援webkit瀏覽器。注意,在現代瀏覽器中需要使用-webkit-字首。
使用方法
/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);
複製程式碼
一些 demo
- 預覽
<div className="demo">
<h4>三角裁剪</h4>
<div className="clipClass1" />
<h4>圓形裁剪</h4>
<div className="clipClass2" />
<h4>橢圓裁剪</h4>
<div className="clipClass3" />
<h4>裁剪插圖</h4>
<div className ="clipClass4" />
</div>
複製程式碼
.demo > div {
width: 100px;
height: 100px;
margin: 20px;
background: lightcoral;
}
.clipClass1 {
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.clipClass2 {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
.clipClass3 {
-webkit-clip-path: ellipse(30% 20% at 50% 50%);
clip-path: ellipse(30% 20% at 50% 50%);
}
.clipClass4 {
-webkit-clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
}
複製程式碼
構建載入動畫元件
-
目錄
- src
- index.js
- help.tsx
- spinner.tsx
- style.css
- src
-
spinner.tsx
import React, { Component } from "react";
import PropTypes from "prop-types";
/**
* @desc 載入動畫元件
* @param
* size: 半徑大小
* spinnerColor: 顏色
* spinnerWidth: 圓圈寬度
* visible: 是否顯示
*/
export interface ISpinnerProps {
size?: number;
spinnerColor?: string;
spinnerWidth?: number;
visible?: boolean;
}
class Spinner extends Component<ISpinnerProps> {
static defaultProps = {
size: 40,
spinnerColor: "#333333",
spinnerWidth: 5,
visible: true
};
render() {
const { visible } = this.props;
if (!visible) {
return null;
}
const { id, size, width, height, spinnerColor, spinnerWidth } = this.props;
const dimension = size || Math.min(width, height);
return (
<div
id={id}
className="spinner"
style={{
width: dimension,
height: dimension,
borderColor: spinnerColor,
borderWidth: spinnerWidth
}}
/>
);
}
}
export default Spinner;
複製程式碼
這裡我們還缺 spinner 的樣式,我們這裡建立一個高階元件更好的擴充我們的 spinner。
- help.tsx
- 關鍵點 clip-path: polygon 動畫
- animation、transform 動畫的使用
- 使用上面的使用方法
import React from "react";
const css = `
.spinner {
width: 80px;
height: 80px;
border-radius: 50%;
border: 10px solid #333;
box-sizing: border-box;
// animation: 動畫名 動畫時長 動畫速度曲線 輪流反向播放動畫(alternate) 迴圈次數(infinite)
animation: sweep 1s linear alternate infinite, rota 0.8s linear infinite;
}
// 其他瀏覽器支援 @-webkit-等 這裡為了節省空間就不加了,需要支援
@keyframes rota {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes sweep {
0% {
clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 50% 50%, 0% 0%, 0% 0%, 0% 0%);
}
50% {
clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 50% 50%, 100% 0%, 100% 0%, 0% 0%);
}
100% {
clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 50% 50%, 100% 100%, 100% 0%, 0% 0%);
}
}
`;
const SPINNER_ID = "spinner_id_style";
const ID_HOLDER = {};
ID_HOLDER.id = 0;
export const SpinnerMixin = Component =>
class extends React.Component {
constructor(props) {
super(props);
// 在 head 中插入上面的樣式
if (!document.getElementById(SPINNER_ID)) {
const head = document.head || document.getElementsByTagName("head")[0];
const sprc = document.createElement("style");
sprc.id = SPINNER_ID;
sprc.type = "text/css";
if (sprc.styleSheet) {
sprc.styleSheet.cssText = css;
} else {
sprc.appendChild(document.createTextNode(css));
}
if (head) {
head.appendChild(sprc);
}
}
//加上唯一 id 區分多個 spinner
ID_HOLDER.id += 1;
this.state = {
id: `spinner_${ID_HOLDER.id}`
};
}
render() {
return <Component {...this.props} {...this.state} />;
}
};
複製程式碼
-
最後
-
spinner.tsx
- 包裹上我們的高階元件,然後再引用就 ok 了
import React, { Component } from "react";
import PropTypes from "prop-types";
import { SpinnerMixin } from "./help";
// ...... some codes
export default SpinnerMixin(Spinner);
複製程式碼
- index.js
import React from "react";
import ReactDOM from "react-dom";
import Spinner from "./spinner";
function App() {
return (
<div className="App">
<h1>Hello Clip-Path</h1>
<div className="container">
<h4>載入動畫</h4>
<Spinner
spinnerColor="red"
spinnerWidth={10}
size={100}
visible={true}
/>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
複製程式碼
然後就可以看到最開始的動畫效果了
- 完整程式碼,請看 codepen