【前端react 粒子特效】

前言

最近写项目的时候，登录页面需要添加粒子特效。

了解了一下发现比较常用的插件库应该就是particle了,

这个是particles，但是目前已被弃用

npm i react-particles-js

取代它的是tsparticles

npm i react-tsparticles

这个粒子插件让没有了解过的它人（比如我）使用起来异常的难受，主要是因为里面的参数不知道有什么用的。

我在使用它的过程中，实现粒子效果花了几分钟，毕竟人家的readme里面就有写了例子，然后花了大概两小时去找它里面的参数的作用（包括找文章、翻官网等），我没想到的是连官网自己都不写参数的作用，离大谱。
后来就是自己一个一个地试着修改。。。。。
先安装两个插件，会用到的
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中的例子https://particles.js.org/

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

在tsparticles和canvas-nest之间，我现在选择的是canvas-nest
毕竟我现在只要简单的粒子效果就行了