JS库之粒子 射流研究…中文开发手册及参数详解

因为自己需要做产品，所以一个好的用户界面界面也是很重要的，发现这种散射的原子颗粒特效还不错，就弄了一个

官方github:https://github。com/VincentGarreau/粒子。js/

演示制作器，注意可能需要会计季度(财政季度)

https://codepen.io/VincentGarreau/pen/pnlso这个可以把你制作的演示导出

http://vincentgarreau.com/particles.js/这个可以用来尝试配置不同效果

使用方法

加载粒子。射流研究…并配置粒子：

index.html

div id='粒子-js '/div脚本src=' http :粒子。js'/scriptapp.js

/*刨花板sJS.load(@dom-id，@path-json，@callback(可选));*/粒子sJS.load('粒子-js '，'资产/粒子。json '，function(){ console。日志('回调-粒子。js配置已加载’)；});粒子。json就是主要的配置文件

注意一下文件顺序，不然会出现问题

实际演示

！DOCTYPE html html head meta charset=' UTF-8 ' titleparticles.js/title链接rel='样式表href=' style。CSS ' rel='外部no follow '/headdydiv id=' particles-js '/div/body script src=' particles。量滴js '/脚本这个玩意需要放在下面脚本src=' http :索引。js /脚本/html

如有需要下载演示请到即时通信软件群，黑色原子效果很科幻，还不错

根据钢性铸铁颜色和json配置文件，就打造属于自己的科幻效果

参数

键值参数选项/说明实例粒子。数字。数值数量40粒子。数量。密度。启用布尔真/假粒子。数量。密度。值_面积数区域散布密度大小800粒子。颜色。值HEX(字符串)RGB(对象)HSL(对象)数组选择(HEX)随机（字符串)

原子的颜色

# b 61924"{ r :182，g:25，b:36} {h:356，s:76，l:41} ['#b61924 '，' # 33333333 '，' 999999']'随机'粒子。形状.类型字符串数组选择原子的形状圆' '边' '三角形' '多边形' '星形' '图像'['圆','三角形，图像']粒子。形状。笔画。宽度数字原理的宽度2粒子。形状。笔画。颜色HEX(字符串)原子颜色#222222 '粒子。形状。多边形。nb _幻灯片编号原子的多边形边数5粒子。形状。图像。科学研究委员会路径链接svg/png/gif/jpg原子的图片可以使用自定义图片资产/img/yop。SVG ' ' http://mwebsite。com/assets/img/yop。png粒子。形状。图像。宽度数字(用于纵横比)图片宽度100个粒子。形状。图像。高度数字（对于纵横比)图片高度100个粒子。不透明度。数值(0到1)不透明度0.75粒子。不透明度。随机布尔值随机不透明度真/假粒子。不透明度。动漫。启用布尔值渐变动画真/假粒子。不透明度。动画。速度数字渐变动画速度3粒子。不透明度。动画。不透明度_最小值(0到1) 渐变动画不透明度0.25粒子。不透明度。动画。同步布尔真/假粒子。大小。数值原子大小20个粒子。大小。随机布尔值原子大小随机真/假粒子。size.anim.enable布尔值原子渐变真/假粒子。大小。动画。速度数字原子渐变速度3个粒子。size.anim.size_min数字0.25粒子。size.anim.sync布尔值真/假粒子. line _ linked.enable布尔值连接线真/假粒子。line _ link。距离数连接线距离150粒子。_ linked.color HEX(字符串)连接线颜色#ffffff粒子。line _ link。不透明度数字(0到1) 连接线不透明度0.5粒子。line _ linked.width数连接线的宽度1.5粒子。移动。启用布尔值原子移动真/假粒子。移动。速度数字原子移动速度四粒子。移动。方向字符串原子移动方向无"顶部""右上""右侧""右下""底部""左下""左下""左上"粒子。移动。随机布尔值移动随机方向真/假粒子。移动。直线布尔型直接移动真/假粒子。移出模式字符串（在画布之外)是否移动出画布"反弹"粒子。移动。反弹布尔（粒子之间)是否跳动移动真/假粒子。移动。吸引。启用布尔值原子之间吸引真/假粒子。移动。吸引。旋转数原子之间吸引X水平距离3000个粒子。移动。吸引。旋转数字y垂直距离1500互动。检测字符串原子之间互动检测“画布”、“窗口”互动。事件。在那边。启用布尔值悬停真/假互动。事件。完毕。方式字符串数组选择

悬停模式

抓住抓取临近的"泡泡"泡沫球效果拒绝击退效果['抓取','气泡]互动。事件。onclick。启用布尔值点击效果真/假互动。事件。onclick。方式字符串数组选择

点击效果模式

push ' ' remove ' ' bubble ' ' reuse '[' push '，' reuse ']交互。事件。调整布尔值的大小互动事件调整真/假交互性。事件。模式。抓取。距离数原子互动抓取距离100交互性。事件。模式。抓取。线条_链接。不透明度数字(0到1)原子互动抓取距离连线不透明度0.75交互性。事件。模式。气泡。距离数原子抓取泡沫效果之间的距离100交互性。事件。模式。气泡。大小数字原子抓取泡沫效果之间的大小40交互性。事件。模式。气泡。持续时间数字原子抓取泡沫效果之间的持续事件（第二)0.4交互性。事件。模式。排斥。距离数击退效果距离200互动。事件。模式。拒绝。持续时间数字击退效果持续事件（第二)1.2交互性。事件。模式。推送。粒子_nb数量粒子推出的数量四交互性。事件。模式。推送。粒子_nb数字四视网膜_检测布尔真/假总结

以上所述是小编给大家介绍的射流研究…库之粒子。射流研究…中文开发手册及参数详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！