Particles.js：运动与互动-CSDN博客

在上一期Particles.js教程中，您学习了如何创建具有所需形状和大小的粒子。看到所有粒子都在移动感觉很好，但仍有改进的空间。目前，各种颗粒之间没有相互作用。它们只是彼此通过，好像其他粒子不存在一样。

本教程将教您如何通过控制粒子的方向，速度等来按所需方式移动粒子。您还将了解各种交互模式和事件。

控制粒子运动

并非每个粒子系统中的所有粒子都沿随机方向移动。即使他们这样做，也有其他力量在起作用。例如，它们可能在彼此靠近时加速，或者在碰撞后反弹。所有这些选项都可以通过move下可用的各种属性来控制。

如果您根本不希望粒子移动，可以通过将enable设置为false 。您可以使用参数speed指定粒子的speed 。要以某种随机速度移动每个粒子，请将random设置为true 。另一方面，要将它们沿随机方向移动，请将direction指定为none 。

迟早，至少一个粒子将移动到系统的边界。该粒子是反弹还是从另一个方向出来， out_mode参数的值。设置为out ，粒子将从画布中移出。设置为bounce ，粒子在达到边界后会弹回。

当粒子彼此通过而没有任何速度变化时，似乎有点不自然。要在每次碰撞时更改粒子速度，可以将bounce设置为true 。有趣的是，仅当启用line_linked或attraction属性时，此方法才line_linked 。即使碰撞不是正面碰撞，粒子也会在每次碰撞时反转其方向。

最后，我想讨论一下吸引力。启用吸引力后，只要粒子靠近其他粒子，它们就会改变其速度。根据其他参数的值，变化可以是正值或负值。在每个方向上的吸引力是反比于相应的参数，的值rotateX和rotateY 。默认值很高，可以观察到明显的吸引力。另一方面，如果将它们的值设置得太低，则粒子将在一段时间后获得非常高的速度。

负责上述粒子运动的JSON是：

"move": {
  "enable": true,
  "speed": 20,
  "random": true,
  "direction": "none",
  "bounce": true,
  "out_mode": "bounce",
  "attract": {
    "enable": true,
    "rotateX": 10,
    "rotateY": 10
  }
}

您应该记住，当同时straight设置为true且将direction为none时，粒子将根本不会移动。

互动事件和模式

到目前为止，一切都很好，但是您可能想知道粒子是否还可以与用户交互，如果可以，则粒子将如何交互。

为了回答您的第一个问题，粒子可以与用户互动。 Particles.js可以响应三个事件： hover ， click和resize 。但是，首先您应该知道，可以通过设置detect_on参数的值在画布上或在窗口本身上检测到事件。现在，只要您将鼠标悬停，单击或调整画布/窗口大小，就会触发所有这些事件。

将resize设置为true ，粒子将在剩余空间中进行自我调整，而不会发生任何变形。当resize设置为false ，粒子将改变其形状以适应画布大小的任何变化。

"detect_on": "canvas",
"events": {
  "onhover": {
    "enable": true,
    "mode": "repulse"
  },
  "onclick": {
    "enable": true,
    "mode": "push"
  },
    "resize": true
}

您可能想知道上面的代码片段中的mode参数做什么。此参数定义粒子将如何与用户交互。该库定义了五种交互模式。它们被grab ， bubble ， repulse ， push和remove 。

grab模式会在您悬停或点击的位置与您设置的特定距离内的附近粒子之间建立连接线。此模式仅适用于悬停事件。下面的JSON绘制了一条透明度为1的线，以连接800 px之内的所有粒子。

"grab": {
  "distance": 800,
  "line_linked": {
    "opacity": 1
  }
}

bubble模式会在您确定的持续时间内更改特定距离内的所有粒子的大小和不透明度。 repulse模式使粒子远离咔嗒声的位置。这两种模式都可以添加到hover或click 。在两种情况下，持续时间仅适用于单击事件。

"bubble": {
  "distance": 600,
  "size": 60,
  "duration": 0.1,
  "opacity": 1
},
"repulse": {
  "distance": 500,
  "duration": 0.5
}

您应该尝试更改各种参数以使演示效果更好。

push模式在每次单击鼠标时都会添加一定数量的粒子。粒子将添加到单击的位置。同样， remove模式从画布上删除粒子。随机确定要除去的颗粒。

"push": {
  "particles_nb": 3
},
"remove": {
  "particles_nb": 1
}

最后的想法

本系列中的三个教程涵盖了Particles.js必须提供的所有内容。我还时不时地提到一些事情，这样您以后就不必再为诸如粒子彼此不弹跳之类的问题而scratch草。

如果您需要更多地了解我们讨论的所有参数，请查阅该库的文档。此外，如果您在使用该库时陷入困境，或者由于某些原因而无法正常运行，我建议您阅读源代码，以了解底层情况。

翻译自: https://code.tutsplus.com/tutorials/particles-js-motion-and-interaction--cms-26302