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

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

数量，颜色和不透明度

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

"number": {
  "value": 50, 
  "density": {
    "enable": true,
    "value_area": 500
  }
}

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

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

如果要随机设置粒子颜色，则可以使用“ random”值进行设置。 最后，要从颜色列表中随机设置颜色，您将必须以十六进制格式提供颜色作为数组。 这是设置粒子颜色的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 colors randomly
}

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

"opacity": {
  "value": 1,
  "random": true, // Set to false in our case
  "anim": {
    "enable": true,
    "speed": 8,
    "opacity_min": 0.4,
    "sync": false
  }
}

将"sync"设置为true将同时为所有粒子的不透明度设置动画。 对"opacity_min"使用0.4的值可确保动画期间任何粒子的不透明度永远不会低于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",
  "image": {
     "src": "img/football.png", // Set image path.
     "width": 1,   // Width and height don't decide size.
     "height": 1   // They just decide aspect ratio.
  }
}

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

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

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

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

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

将粒子链接在一起

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

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

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

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

最后的想法

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

下一个教程将教您如何控制粒子的运动以及它们之间以及与您之间的相互作用。 如果您对本教程有任何疑问，请发表评论。

翻译自: https://code.tutsplus.com/tutorials/particles-js-control-particle-count-and-shape--cms-26290