粒子：JS：运动和相互作用

在本教程中，我们将深入探讨Particles.js，学习如何控制粒子运动、交互模式和事件。在前一教程中，我们已经学习了如何创建形状和大小各异的粒子。然而，粒子之间缺乏互动，它们彼此穿过，仿佛不存在其他粒子。本教程将弥补这一不足。

掌控粒子运动

并非所有粒子系统中的粒子都以随机方向移动。即使是随机运动，也存在其他作用力。例如，粒子在彼此接近时可能会加速，或在碰撞后反弹。所有这些选项都可以通过move属性下的各种参数来控制。

如果不想让粒子移动，可以将enable设置为false。可以使用speed参数指定粒子的速度。要使每个粒子以随机速度移动，将random设置为true。另一方面，要使它们以随机方向移动，将direction指定为none。

粒子最终会移动到系统边界。out_mode参数决定粒子是反弹还是从另一个方向出现。当设置为out时，粒子会移出画布；设置为bounce时，粒子会在撞击边界后反弹。

粒子彼此穿过而速度不变显得不太自然。要改变每次碰撞时的粒子速度，可以将bounce设置为true。有趣的是，只有在启用line_linked或attraction属性时，此设置才有效。粒子每次碰撞都会反转方向，即使不是迎面碰撞。

最后，让我们讨论吸引力。启用吸引力后，粒子在其附近存在其他粒子时会改变速度。变化可能是正的或负的，取决于其他参数的值。每个方向的吸引力与各自参数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时，粒子会改变形状以适应画布大小的任何变化。

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

mode参数定义了用户如何与粒子交互。库定义了五种交互模式：grab、bubble、repulse、push和remove。

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

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

bubble模式会改变特定距离内所有粒子的尺寸和不透明度，持续时间由您决定。repulse模式使粒子远离点击的位置。这两种模式都可以添加到hover或click中。持续时间仅适用于这两种情况下的点击事件。

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

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

push模式在每次鼠标点击时添加一定数量的粒子。粒子将添加到点击的位置。类似地，remove模式会从画布中移除粒子。要移除的粒子是随机选择的。

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

总结

本系列教程涵盖了Particles.js的所有功能。为了避免您日后遇到粒子不相互反弹等问题，我还时不时地提到了一些注意事项。

如果您需要了解我们讨论的所有参数的更多信息，请参阅该库的文档。此外，如果您在使用该库时遇到问题，或者某些功能行为异常，建议您阅读源代码以了解其内部工作原理。

本文已更新，并收录了Kingsley Ubah的贡献。Kingsley热衷于创作教育和启发读者的内容。他的爱好包括阅读、足球和骑自行车。

以上是粒子：JS：运动和相互作用的详细内容。更多信息请关注PHP中文网其他相关文章！