資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 React JS 中建立粒子動畫
“粒子動畫”是遊戲物理學、運動圖形和計算機圖形中的一種技術，它使用許多微小的精靈、3D 模型或其他圖形物件來模擬某些型別的“模糊”現象。
在本文中，我們將瞭解如何在 React JS 中製作流行的粒子動畫。我們將使用名為“react-tsparticles”的第三方包來實現這一點。
首先建立一個 React 專案 -
npx create-react-app tutorialpurpose
轉到專案目錄 -
cd tutorialpurpose
示例
下載並安裝“react-tsparticles”包 -
npm install react-tsparticles react
我們將使用此包新增具有不同樣式元素的預設粒子動畫。您還可以為不同的內容新增 id 和不同的選項，例如粒子速度、粒子顏色、背景顏色、粒子數量、粒子大小等。
在App.js中新增以下程式碼行 -
import Particles from "react-tsparticles";
import React from "react";
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Particles
id="tsparticles"
options={{
background: {
color: {
value: "#0000",
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#fff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0,
width: 1,
},
collisions: {
enable: true,
},
move: {
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 5,
straight: false,
},
number: {
density: {
enable: true,
value_area: 800,
},
value: 300,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
}}
/>
);
}
}說明
在options屬性中，您將看到許多不同型別的可編輯值。您可以調整這些值以獲得不同型別的效果，例如，
在shape中，您可以使用“square”來製作方形粒子。
在size中，您可以定義粒子的尺寸。
在number中，您可以定義粒子的數量等。
輸出
執行後，它將產生以下輸出 -
更新於： 2021年9月29日
915 次檢視
廣告