react背景做粒子特效

终端安装两个插件

npm install react-tsparticles
npm install tsparticles

以下是用法

//引入

import Particles from 'react-tsparticles'
import { loadFull } from "tsparticles";

//组件的最外层

  const particlesInit = async (main) => {
    await loadFull(main);
    };

//粒子被正确加载到画布中时，这个函数被调用
  const particlesLoaded = (container) => {
    console.log("123", container);
  };

//在你的代码中写入 //options是粒子参数

<Particles
     id="tsparticles"
     init={particlesInit}
     loaded={particlesLoaded}
     options={options}
 />

//粒子参数

    const options = {
        "background": {
            "color": {
                "value": "#232741"
            },
            "position": "50% 50%",
            "repeat": "no-repeat",
            "size": "cover"
        },
        // 帧数，越低越卡,默认60
        "fpsLimit": 120,
        "fullScreen": {
            "zIndex": 1
        },
        "interactivity": {
            "events": {
                "onClick": {
                    "enable": true,
                    "mode": "push"
                },
                "onHover": {
                    "enable": true,
                    "mode": "slow"
                }
            },
            "modes": {
                "push": {
                    //点击是添加1个粒子
                    "quantity": 3,
                },
                "bubble": {
                    "distance": 200,
                    "duration": 2,
                    "opacity": 0.8,
                    "size": 20,
                    "divs": {
                        "distance": 200,
                        "duration": 0.4,
                        "mix": false,
                        "selectors": []
                    }
                },
                "grab": {
                    "distance": 400
                },
                //击退
                "repulse": {
                    "divs": {
                        //鼠标移动时排斥粒子的距离
                        "distance": 200,
                        //翻译是持续时间
                        "duration": 0.4,
                        "factor": 100,
                        "speed": 1,
                        "maxSpeed": 50,
                        "easing": "ease-out-quad",
                        "selectors": []
                    }
                },
                //缓慢移动
                "slow": {
                    //移动速度
                    "factor": 2,
                    //影响范围
                    "radius": 200,
                },
                //吸引
                "attract": {
                    "distance": 200,
                    "duration": 0.4,
                    "easing": "ease-out-quad",
                    "factor": 3,
                    "maxSpeed": 50,
                    "speed": 1

                },
            }
        },
        //  粒子的参数
        "particles": {
            //粒子的颜色
            "color": {
                "value": "#ffffff"
            },
            //是否启动粒子碰撞
            "collisions": {
                "enable": true,
            },
            //粒子之间的线的参数
            "links": {
                "color": {
                    "value": "#ffffff"
                },
                "distance": 150,
                "enable": true,
                "warp": true
            },
            "move": {
                "attract": {
                    "rotate": {
                        "x": 600,
                        "y": 1200
                    }
                },
                "enable": true,
                "outModes": {
                    "bottom": "out",
                    "left": "out",
                    "right": "out",
                    "top": "out"
                },
                "speed": 6,
                "warp": true
            },
            "number": {
                "density": {
                    "enable": true
                },
                //初始粒子数
                "value": 40
            },
            //透明度
            "opacity": {
                "value": 0.5,
                "animation": {
                    "speed": 3,
                    "minimumValue": 0.1
                }
            },
            //大小
            "size": {
                "random": {
                    "enable": true
                },
                "value": {
                    "min": 1,
                    "max": 3
                },
                "animation": {
                    "speed": 20,
                    "minimumValue": 0.1
                }
            }
        }
    }

另外一个插件库则是canvas-nest

npm i react-canvas-nest

使用方法是

先引入

import ReactCanvasNest from 'react-canvas-nest'

<ReactCanvasNest
    className='canvasNest'
    config={{
        pointColor: ' 255, 255, 255 ',
        lineColor: '255,255,255',
        pointOpacity: 0.5,
        pointR: 2,
        count:100
	}}
    style={{ zIndex: 1 }}
/>

config参数配置

参数	描述	默认
count	粒子数量	88
pointR	粒子的半径(即粒子的大小)	1
pointColor	粒子颜色	114,114,114
pointOpacity	粒子的透明度(0~1)	1
dist	两点之间的最大距离	6000
line	点与点之间的线的颜色	0,0,0
lineWidth	线的宽度	1
follow	是否跟随鼠标	true
mouseDist	点与鼠标之间的距离	20000

结果

优点

tsparticles

它的优点很多，不如它可以通过不同的参数来配置显示出来的不同粒子效果，简单一点的有：粒子形状、点击页面分裂粒子、鼠标箭头排斥粒子等。 只要你会用，你就能玩出不同的骚操作

canvas-nest 没有复杂的参数配置，效果显示简洁

缺点

tsparticles

它的缺点也很明显，就是参数太多了，过于复杂，没有API的说明（至少我没找到） 还有一点就是使用官网的readme文档中的例子，页面经过长时间运行后，你会发现粒子貌似会无限加速，慢慢的你会听到你的风扇在咆哮， 建议用的时候去找官网demos中的例子particles.js.org/

canvas-nest 单一的点和线，粒子数量不能弄太多，容易卡（conut设置到200后，能看到页面粒子卡到飞起）。

在tsparticles和canvas-nest之间，我现在选择的是canvas-nest