react实现粒子动画

最新推荐文章于 2025-07-13 12:18:04 发布

晨晨快跑

最新推荐文章于 2025-07-13 12:18:04 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术文章标签： react 粒子动画

本文链接：https://blog.youkuaiyun.com/baidu_38027860/article/details/84580063

首先安装依赖

npm i reactparticles.js --save

简单用法，引入当做标签用，id必填任意不重复即可，config指向public下存放的.json配置文件，配置文件可以自己改，也可以去官网生成：

地址：https://github.com/kr1tzb1tz/reactparticles.js

//引入

import Particles from 'reactparticles.js';

在render中使用

<Particles id="test-particles" config="test-particles.json"/>

public下的test-particles.json文件内容如下：

{

"particles": {

"number": {

"value": 100,

"density": {

"enable": false,

"value_area": 800

}

},

"color": {

"value": "#ffffff"

},

"shape": {

"type": "image",

"stroke": {

"width": 0,

"color": "#000000"

},

"polygon": {

"nb_sides": 5

},

"image": {

"src": "./img/coin_bagshare.png",

"width": 50,

"height": 50

}

},

"opacity": {

"value": 1