資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚學
法學利用 React JS 實現 SVG 形態變化
SVG 形態變化非常有用，它可以使 SVG 影像在漂亮的動畫中進行形態變化，看起來非常棒。當一個 SVG 更改為另一個 SVG 時，它是一種在兩個 SVG 影像之間進行過渡的技術。
首先建立一個 React 專案 −
npx create-react-app tutorialpurpose
進入專案目錄 −
cd tutorialpurpose
示例
下載並安裝 react-svg-morph 程式包 −
npm install react-svg-morph --save
此程式包將允許我們在 SVG 中實現預製的變形動畫。
在 App.js 中新增以下程式碼行 −
import React from "react";
import ReactDOM from "react-dom";
import { MorphReplace } from "react-svg-morph";
class Checked extends React.Component {
render() {
return (
<svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41- 1.41z" />
</svg>
);
}
}
class CheckBox extends React.Component {
render() {
return (
<svg width="24" height="24" fill="#666666" viewBox="0 0 24 24">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
</svg>
);
}
}
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
};
}
toggleChecked() {
this.setState({ checked: !this.state.checked });
}
render() {
return (
<div onClick={this.toggleChecked.bind(this)}>
<MorphReplace width={100} height={100}>{this.state.checked ? ( <Checked key="checked" /> ) : (
<CheckBox key="checkbox" />)}
</MorphReplace>
</div>
);
}
}解釋
程式碼是不言自明的。
我們建立了兩個 SVG 類。
然後我們建立了一個 main 類，其中有一個函式可以將狀態更改為 true 或 false。
然後我們在 MorphReplace 元件內部添加了兩個 SVG，當我們單擊它們時，它們將發生變化。
輸出
現在，讓我們檢查一下輸出 −
更新於： 29-Sep-2021
717 次瀏覽
廣告