前言
最近写项目的时候,登录页面需要添加粒子特效。
了解了一下发现比较常用的插件库应该就是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
毕竟我现在只要简单的粒子效果就行了