Particles.js：简介

许多微小的粒子在周围移动或相互影响或与您互动，对它们有一定的吸引力。 如果您处在需要处理大量粒子的情况下，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