Particles.js：控制粒子数和形状

之前的Particles.js教程简要讨论了该库提供的各种功能以及如何开始使用该库。在本教程中，我将详细介绍 Particles.js 处理粒子物理外观的所有方面。

数量、颜色和不透明度

我们要处理的第一件事是粒子的数量和密度。密度决定了在给定区域中将聚集在一起的粒子数量。它默认启用，value_area设置为 800。这是让您控制粒子数量的 JSON：

"number": {
   "value": 50,
   "density": {
     "enable": yes,
     "value area": 500
   }}

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

设置粒子颜色的方法有3种。您可以设置 HEX 格式、RGB 格式或 HSL 格式的颜色。由于库中的错误，RGB 和 HSL 格式仅在您从库中删除默认颜色值时才有效。

如果要随机设置粒子颜色，可以使用值“random”。最后，要从颜色列表中随机设置颜色，您必须提供 HEX 格式的颜色作为数组。这是为粒子设置颜色的 JSON：

"color": {
   "value": "#fff" //set white in HEX (we are using this version)
   "value": {r:255, g:255, b:255} //set white in RGB
   "value": {h:0, s:100%, l:100%} //set white in HSL
   "value": ["#f00", "#0f0", "#00f"] //Set red, green and blue randomly
   "value": "random" //set the color randomly}

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

"Opacity":{
   "value": 1,
   "random": true, // set to false in our case
   "animation": {
     "enable": yes,
     "speed": 8,
     "Opacity Min": 0.4,
     "sync": false
   }}

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

形状和尺寸

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

"shape": {
   "type": "polygon",
   "stroke": {
      "width": 4,
      "color": "#fff"
   },
   "polygon": {
      "nb_sides": 6
   }}

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

"shape": {
   "type": "image",
   "picture": {
      "src": "img/football.png", // Set the image path.
      "width": 1, // Width and height do not determine size.
      "height": 1 // They just determine the aspect ratio.
   }}

该库还允许您将多个形状混合在一起。例如，您可能决定同时创建圆形、正方形和六边形。在这种情况下，您所要做的就是传递一个包含所有这些形状的数组。

"type": ["circle", "edge", "polygon"]

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

"size": {
   "value": 25,
   "random": true,
   "animation": {
     "enable": yes,
     "speed": 20,
     "size_min": 10,
     "sync": false
   }}

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

将粒子链接在一起

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

此属性有四个附加值。该distance属性指定绘制线的最大距离。您还可以将 设置color为十六进制字符串。线条的不透明度根据粒子之间的距离而变化。您指定的值opacity是当粒子真正靠近时线条的不透明度。最后，width确定你的线条有多宽。这是随附演示的 JSON 片段。

"line_linked": {
   "enable": yes,
   "distance": 200,
   "color": "#fff",
   "opacity": 1,
   "width": 4}

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

最后的想法

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