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();

默认情况下，粒子是白色的。它们还通过细白线相互连接。因此，如果您现在没有看到任何内容，只需将背景更改为其他内容即可。这是我用于设置粒子 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": {
    
  }
}

所有与形状、大小和运动等物理属性相关的配置选项都将位于 articles 内。所有决定交互行为的配置选项都将放在 interactivity 中。

我将粒子数量设置为 100。这通常取决于可用空间。如前所述，我还将形状设置为 circle。此时，您的文件应如下所示：

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    }
  },
  "interactivity": {
    
  }
}

我使用值 10 来设置雪花的大小。由于雪花大小不同，我将 random 设置为 true。这样，雪花可以具有零到我们指定的最大限制之间的任何大小。要禁用或删除将这些粒子链接在一起的所有行，您可以将 enable 设置为 false for line_linked。

要移动粒子，您必须将 enable 属性设置为 true。如果没有任何其他设置，粒子将随意移动，就像在太空中一样。您可以使用字符串值设置这些粒子的方向，例如 "bottom"。尽管粒子的一般运动是向下的，但它们仍然需要稍微随机地移动才能看起来自然。这可以通过将 straight 设置为 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 下的 articles_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 事件。默认情况下它是启用的。同样，我可以删除其他选项，例如 "detect_on": "canvas" under interactivity 和 "straight": false under move。我保留它们是为了让初学者不会对粒子为何不沿直线移动等问题感到困惑。

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

最终想法

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

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

以上是Particles.js：基础知识简介的详细内容。更多信息请关注PHP中文网其他相关文章！