许多微小的粒子在周围移动或相互影响或与您互动，对它们有一定的吸引力。 如果您处在需要处理大量粒子的情况下，Particles.js将为您提供良好的服务。 从名称可以明显看出，它是一个JavaScript库，可以帮助您创建粒子系统。 此外，它重量轻，易于使用，并提供了很多控制权。
在本教程中，我将介绍该库的所有功能并帮助您入门。 本教程是本系列的第一部分，将仅介绍基础知识。
安装及使用
首先，您需要托管库。 您可以将其上传到自己的服务器上，也可以像我一样使用jsdeliver CDN。
<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 您还需要创建一个DOM元素，Particles.js将在其中创建粒子。 为其提供一些易于识别的id ，以供以后参考。
<div id="particles-js"></div>现在，要创建具有默认设置的基本粒子系统，您只需要一行JavaScript即可初始化库。
particlesJS(); 默认情况下，粒子为白色。 它们还与细白线互连。 因此，如果您现在没有看到任何内容，只需将背景更改为其他内容即可。 这是样式CSS div CSS：
#particles-js {
background: cornflowerblue;
}尝试点击下面演示中的某个地方。 每次单击后，Particles.js将再生成四个新的粒子。
设置自定义选项
即使只花了四行代码即可创建上一个演示，但最终结果可能并非您想要的。 在我看来，这些颗粒的尺寸似乎更大一些，并且紧密堆积。 也许您希望粒子的形状不同或具有随机大小。 Particles.js允许您在JSON中设置所有这些以及更多属性，您可以在初始化期间引用这些属性。 调用该函数的常规语法如下：
particlesJS(dom-id, path-json, callback (optional)); 在这里， dom-id是您希望粒子出现的元素的id。 path-json是具有所有配置选项的JSON文件的路径，而callback是可选的回调函数。 您可以将JSON代码直接放在第二个参数中，而不是路径。
让我们尝试使用这个很棒的库来创建降雪。 首先，我们的函数将如下所示：
particlesJS("snowfall", 'assets/snowflakes.json'); 我已经删除了回调函数，并将DOM Id更改为更特定的名称。 雪花大多为球形。 它们将下降并且尺寸不均匀。 另外，与我们的第一个演示不同，它们不会通过线连接。
移动粒子
首先，我们的snowflakes.json文件将具有以下代码：
{
"particles": {
},
"interactivity": {
}
} 我们与形状，大小和运动等物理属性相关的所有配置选项都将放在particles内部。 所有决定交互行为的配置选项都将进入interactivity 。
我将粒子数设置为100。这通常取决于可用空间。 如前所述，我还将形状设置为圆形。 此时，您的文件应如下所示：
{
"particles": {
"number": {
"value": 100
},
"shape": {
"type": "circle"
}
},
"interactivity": {
}
} 我使用的值为10设置雪花的大小。 由于雪花的大小各不相同，因此我将random设置为true 。 这样，雪花的大小可以在零到我们指定的最大限制之间。 要禁用或删除将这些粒子链接在一起的所有行，可以将line_linked enable设置为false 。
要四处移动粒子，必须将enable属性设置为true 。 如果没有其他设置，粒子将像在太空中一样随意移动。 您可以使用"bottom"类的字符串值设置这些粒子的方向。 即使粒子的总体运动是向下的，它们仍然需要随机移动一点才能看起来自然。 可以通过straight设置为false来实现。 此时， snowflakes.json将具有以下代码：
{
"particles": {
"number": {
"value": 100
},
"shape": {
"type": "circle"
},
"size": {
"value": 10,
"random": true
},
"line_linked": {
"enable": false
},
"move": {
"enable": true,
"speed": 2,
"direction": "bottom",
"straight": false
}
},
"interactivity": {
}
}使用上面的JSON代码，您将获得以下结果：
改变互动行为
如果将鼠标悬停在上面的演示上，您会注意到这些行仍然存在，但仅在悬停期间临时显示。 要完全删除它们，可以将onhover事件的enable属性设置为false 。 尝试在上面的演示中单击，您会发现每次单击都会生成四个粒子。 这是默认行为。 您还可以使用push下的particles_nb属性来更改粒子数。 在这种情况下，我将此数字设置为12。
您还可以使用detect_on选项确定是检测窗口还是画布上的事件。
这是JSON文件的完整代码：
{
"particles": {
"number": {
"value": 100
},
"shape": {
"type": "circle"
},
"size": {
"value": 10,
"random": true
},
"line_linked": {
"enable": false
},
"move": {
"enable": true,
"speed": 2,
"direction": "bottom",
"straight": false
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false
}
},
"modes": {
"push": {
"particles_nb": 12
}
}
}
} 如您所见，我不必专门启用onclick事件。 默认情况下启用。 同样，我可以删除其他选项，例如在interactivity下使用"detect_on": "canvas"和在move下使用"straight": false 。 我将它们保留下来，以使入门者不会对粒子为何不沿直线移动等问题感到困惑。
您可以尝试不同的值来修改此CodePen演示中的雪花。
最后的想法
使用Particles.js入门很容易。 如果您以前从未使用过粒子系统，那么该库将立即帮助您入门。 本教程只是对该库的基本介绍。 在本系列的下两个教程中，我将更详细地介绍该库的所有方面。
如果您对本教程有任何疑问，请在评论中让我知道。
翻译自: https://code.tutsplus.com/tutorials/particles-js-introduction--cms-26285