颗粒：控制粒子计数和形状

上篇Particles.js教程简要介绍了该库提供的各种功能以及如何开始使用它。本教程将详细介绍Particles.js中所有与粒子物理外观相关的方面。

粒子数量、颜色和不透明度

首先，我们将处理粒子的数量和密度。密度决定了在给定区域内聚集在一起的粒子数量。它默认启用，value_area设置为800。以下JSON代码允许您控制粒子数量：

<code>"number": {<br>  "value": 50, <br>  "density": {<br>    "enable": true,<br>    "value_area": 500<br>  }<br>}<br></code>

如果您将密度下的enable设置为false，则显示的粒子数量将恰好为50。将value_area的值加倍将使粒子数量减少大约一半。

有三种方法可以设置粒子的颜色。您可以使用十六进制格式、RGB格式或HSL格式设置颜色。由于库中的一个错误，只有在从库中删除默认颜色值时，RGB和HSL格式才有效。

如果您想随机设置粒子颜色，可以使用值“random”。最后，要从颜色列表中随机设置颜色，您必须以数组的形式提供十六进制格式的颜色。以下是设置粒子颜色的JSON代码：

<code>"color": {<br>  "value": "#fff" //使用十六进制设置白色 (我们使用此版本)<br>  "value": {r:255, g:255, b:255} //使用RGB设置白色<br>  "value": {h:0, s:100%, l:100%} //使用HSL设置白色<br>  "value": ["#f00", "#0f0", "#00f"] //随机设置红色、绿色和蓝色<br>  "value": "random" //随机设置颜色<br>}<br></code>

不透明度属性为您提供了很大的控制权。您可以将其设置为精确值，也可以通过将"random"设置为true来使用随机值。不仅如此，您还可以设置粒子的不透明度动画。以下是用于不透明度属性的JSON代码：

<code>"opacity": {<br>  "value": 1,<br>  "random": true, // 在我们的例子中设置为false<br>  "anim": {<br>    "enable": true,<br>    "speed": 8,<br>    "opacity_min": 0.4,<br>    "sync": false<br>  }<br>}<br></code>

将"sync"设置为true将同时为所有粒子设置不透明度动画。使用0.4的值作为"opacity_min"确保在动画过程中任何粒子的不透明度都不会低于0.4。这是一个星星在太空中移动的演示。尝试更改粒子的数量、颜色或不透明度以查看它们的效果。

形状和大小

Particles.js有五个不同的值来创建基本形状。像circle这样的简单形状会生成一个圆形粒子，triangle会生成三角形粒子，而edge会生成正方形。您可以使用值polygon来创建nb_sides边的多边形，您需要提供nb_sides的值。要创建实际的星形，您可以将形状类型设置为star。stroke参数会在所有粒子周围添加给定颜色和宽度的轮廓。下面的JSON代码将创建六边形。

<code>"number": {<br>  "value": 50, <br>  "density": {<br>    "enable": true,<br>    "value_area": 500<br>  }<br>}<br></code>

也可以显示图像而不是基本形状。首先，您必须将形状类型指定为image。之后，您可以设置图像源及其所需的高度和宽度。值得记住的是，宽度和高度不会决定图像粒子的尺寸，而是它们的纵横比。以下是一些使用足球图像创建粒子的JSON代码：

<code>"color": {<br>  "value": "#fff" //使用十六进制设置白色 (我们使用此版本)<br>  "value": {r:255, g:255, b:255} //使用RGB设置白色<br>  "value": {h:0, s:100%, l:100%} //使用HSL设置白色<br>  "value": ["#f00", "#0f0", "#00f"] //随机设置红色、绿色和蓝色<br>  "value": "random" //随机设置颜色<br>}<br></code>

该库还允许您混合多个形状。例如，您可以决定同时创建圆形、正方形和六边形。在这种情况下，您只需传递包含所有这些形状的数组即可。

<code>"opacity": {<br>  "value": 1,<br>  "random": true, // 在我们的例子中设置为false<br>  "anim": {<br>    "enable": true,<br>    "speed": 8,<br>    "opacity_min": 0.4,<br>    "sync": false<br>  }<br>}<br></code>

size属性具有不透明度属性的所有选项。您可以随机设置大小以及设置单个粒子的动画大小。仔细查看以下JSON代码。

<code>"shape": {<br>  "type": "polygon",<br>  "stroke": {<br>     "width": 4,<br>     "color": "#fff"<br>  },<br>  "polygon": {<br>     "nb_sides": 6<br>  }<br>}<br></code>

如果您将random设置为false，则所有粒子的尺寸都将为25。当random设置为true时，size充当粒子的最大尺寸限制。在动画中将sync设置为true将同时更改所有元素的大小。您应该打开演示并尝试多边形边的数量、动画和其他属性的不同值，以查看它们如何影响最终结果。

连接粒子

当粒子足够接近时，您可以通过启用line_linked属性来绘制它们之间的连接线。

此属性具有四个附加值。distance属性指定将绘制线条的最大距离。您也可以将color设置为十六进制字符串。线条的不透明度会根据粒子之间的距离而变化。您指定为opacity的值是在粒子非常靠近时线条的不透明度。最后，width决定线条的宽度。以下是配套演示的JSON代码片段。

<code>"shape": {<br>  "type": "image",<br>  "image": {<br>     "src": "img/football.png", // 设置图像路径。<br>     "width": 1,   // 宽度和高度不决定大小。<br>     "height": 1   // 它们只决定纵横比。<br>  }<br>}<br></code>

您可以看到，一旦粒子之间的距离超过200像素，线条就会消失。

总结

我已经尽力涵盖了更改粒子形状、大小、颜色以及几乎所有其他物理属性所需的一切知识。本教程中的示例清楚地说明了使用此库是多么容易。如果您需要一个基本的粒子库，您绝对应该尝试一下Particles.js。

下一教程将教您如何控制粒子的运动及其相互之间的交互以及与您的交互。

此文章已更新，并包含Kingsley Ubah的贡献。Kingsley热衷于创作教育和启发读者的内容。爱好包括阅读、足球和骑自行车。

以上是颗粒：控制粒子计数和形状的详细内容。更多信息请关注PHP中文网其他相关文章！