粒子：JS：简介

大量微小粒子四处移动并相互作用——或者与您互动——具有独特的吸引力。如果您需要处理大量粒子，Particles.js 将非常有用。顾名思义，它是一个 JavaScript 库，可以帮助您创建粒子系统。此外，它轻量级、易于使用，并为您提供大量控制。

本教程将涵盖该库的所有功能并帮助您入门。本教程是本系列的第一部分，仅涵盖基础知识。

安装和使用

首先，您需要托管该库。您可以将其上传到您自己的服务器，也可以像我一样使用 jsdeliver CDN。

<code><br></code>

您还需要创建一个 DOM 元素，Particles.js 将在其中创建粒子。给它一个易于识别的圆圈。此时，您的文件应如下所示：

<code>{<br>  "particles": {<br>    "number": {<br>      "value": 100<br>    },<br>    "shape": {<br>      "type": "circle"<br>    }<br>  },<br>  "interactivity": {<br><br>  }<br>}<br></code>

我使用值为 10 来设置雪花的大小。由于雪花的尺寸各不相同，因此我将 random 设置为 true。这样，雪花的大小可以在我们指定的零和最大限制之间变化。要禁用或删除连接这些粒子的所有线条，您可以将 line_linked 的 enable 设置为 false。

要移动粒子，您必须将 enable 属性设置为 true。没有任何其他设置，粒子将杂乱无章地移动，就像它们在太空中一样。您可以使用字符串值（如 "bottom"）设置这些粒子的方向。即使粒子的总体运动是向下的，它们仍然需要稍微随机移动才能看起来自然。这可以通过将 straight 设置为 false 来实现。此时，snowflakes.json 将包含以下代码：

<code>{<br>  "particles": {<br>    "number": {<br>      "value": 100<br>    },<br>    "shape": {<br>      "type": "circle"<br>    },<br>    "size": {<br>      "value": 10,<br>      "random": true<br>    },<br>    "line_linked": {<br>      "enable": false<br>    },<br>    "move": {<br>      "enable": true,<br>      "speed": 2,<br>      "direction": "bottom",<br>      "straight": false<br>    }<br>  },<br>  "interactivity": {<br><br>  }<br>}<br></code>

使用上面的 JSON 代码，您将获得以下结果：

更改交互行为

如果您将鼠标悬停在上面的演示上，您会注意到线条仍然存在，但仅在悬停期间暂时显示。要完全删除它们，您可以将 onhover 事件的 enable 属性设置为 false。尝试点击上面的演示，您会注意到每次点击都会生成四个粒子。这是默认行为。您还可以使用 push 下的 particles_nb 属性更改粒子的数量。在这种情况下，我已将此数字设置为 12。

您还可以使用 detect_on 选项确定是在窗口上还是画布上检测事件。

以下是 JSON 文件的完整代码：

<code><br></code>

如您所见，我不必专门启用 onclick 事件。它是默认启用的。同样，我可以删除 interactivity 下的 "detect_on": "canvas" 和 move 下的 "straight": false" 等其他选项。我保留了它们，这样初学者就不会对诸如粒子为什么没有直线移动之类的疑问感到困惑。

您可以尝试不同的值来修改上面的 CodePen 中的雪花。只需单击 JS 选项卡即可编辑 JSON。

最终想法

Particles.js 入门很容易。如果您以前从未使用过粒子系统，那么这个库将立即帮助您入门。本教程只是对该库的基本介绍。在本系列的接下来的两个教程中，我将更详细地介绍该库的所有方面。

如果您对本教程有任何疑问，请在论坛上告诉我。

以上是粒子：JS：简介的详细内容。更多信息请关注PHP中文网其他相关文章！