数据结构
网络
关系型数据库管理系统
操作系统
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 次查看
广告