前言

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

了解了一下发现比较常用的插件库应该就是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是粒子参数
<Particlesid="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'

 <ReactCanvasNestclassName='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
毕竟我现在只要简单的粒子效果就行了

【前端react 粒子特效】相关推荐

html、css、js粒子特效——前端
html.css.js粒子特效--前端看看效果图首先是html结构使用canvas设置一个画布 <canvas width="500px" height="5 ...
canvas-随机粒子特效
canvas-随机粒子特效目录文章目录前言结果展示代码 `html` `main.js` 前言 canvas实现前端的特效美术结果展示代码 html <!DOCTYPE html& ...
Three.js粒子特效，shader渲染初探
这大概是个序关于Three.js,网上有不多不少的零碎教程,有些过于初级,有些云里雾里,而Three.js官网上的示例逼格之高又令人望而却步,这些对于没学过计算机图形学的童鞋来说,就像入门迈槛不知先 ...
【IOS-COCOS2D游戏开发之十】添加粒子系统特效并解决粒子特效与LAYER之间的坐标问题；...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/472.html ...
Shader相关Mask裁切UI粒子特效或者3D模型
转载自:http://www.xuanyusong.com/archives/3518 原理就是把Mask的裁切区域传给粒子特效Shader,当超出这个区域那么直接让它完全透明即可.粒子特效的源生sh ...
Silverlight 解谜游戏之四粒子特效
前几篇一直在Blend中工作没体现出开发者的作用,本篇将为订书器(Stapler)添加自定义粒子效果,当订书器被点击时产生更好的视觉效果.其中将使用到nerdplusart 的Silverlight ...
前端React结构工程-改写render
前端React结构工程-改写render 工程准备事项 npm install cnpm 初始化工程实例以上是实例化,安装过npm后的列表接下来使用 npm run start 来启动项目当你启 ...
yanobox nodes 3 Mac新一代点线粒子特效运动图形插件
Yanobox Nodes 3.0.3 for Mac版是一款适用于Mac操作系统的粒子特效插件,可直接使用于fcpx和ae软件.打开Final Cut Pro X,在已经安装好的[发生器]中,你会看 ...
使用particles.js实现网页背景粒子特效
得知途径 B3log提供了两套博客系统,一个是用Java开发的,叫做Solo,我也是在网上搜索Java博客系统时发现了它,之后才了解了B3log:还有一个是用Go语言开发的,叫做Pipe.其中Solo ...
看教程学虚幻四——粒子特效之魔法阵
粒子特效之魔法阵上一篇我们已经跟随教程简单了解粒子特效,同时我们制作出一个和教程一样的大佬尿尿动画,如果你全看了并且是自己跟着做了一遍,那这个粒子魔法阵基本也是小case.开始吧! 准备点图片[手 ...

【前端react 粒子特效】

前言

结果

优点

缺点

【前端react 粒子特效】相关推荐

最新文章

热门文章