在本教程中，我們將深入探討Particles.js，學(xué)習(xí)如何控制粒子運動、交互模式和事件。在前一教程中，我們已經(jīng)學(xué)習(xí)了如何創(chuàng)建形狀和大小各異的粒子。然而，粒子之間缺乏互動，它們彼此穿過，仿佛不存在其他粒子。本教程將彌補這一不足。

掌控粒子運動

并非所有粒子系統(tǒng)中的粒子都以隨機方向移動。即使是隨機運動，也存在其他作用力。例如，粒子在彼此接近時可能會加速，或在碰撞后反彈。所有這些選項都可以通過move屬性下的各種參數(shù)來控制。

如果不想讓粒子移動，可以將enable設(shè)置為false。可以使用speed參數(shù)指定粒子的速度。要使每個粒子以隨機速度移動，將random設(shè)置為true。另一方面，要使它們以隨機方向移動，將direction指定為none。

粒子最終會移動到系統(tǒng)邊界。out_mode參數(shù)決定粒子是反彈還是從另一個方向出現(xiàn)。當(dāng)設(shè)置為out時，粒子會移出畫布；設(shè)置為bounce時，粒子會在撞擊邊界后反彈。

粒子彼此穿過而速度不變顯得不太自然。要改變每次碰撞時的粒子速度，可以將bounce設(shè)置為true。有趣的是，只有在啟用line_linked或attraction屬性時，此設(shè)置才有效。粒子每次碰撞都會反轉(zhuǎn)方向，即使不是迎面碰撞。

最后，讓我們討論吸引力。啟用吸引力后，粒子在其附近存在其他粒子時會改變速度。變化可能是正的或負(fù)的，取決于其他參數(shù)的值。每個方向的吸引力與各自參數(shù)rotateX和rotateY的值成反比。默認(rèn)值很高，以便觀察到明顯的吸引力。另一方面，如果將這些值設(shè)置得太低，粒子在一段時間后會獲得非常高的速度。

上面粒子運動的JSON代碼如下：

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

請記住，當(dāng)同時將straight設(shè)置為true并將direction設(shè)置為none時，粒子將不會移動。

交互事件和模式

用戶是否可以與粒子交互？答案是肯定的。Particles.js可以響應(yīng)三個事件：hover、click和resize。通過設(shè)置detect_on參數(shù)的值，可以檢測畫布或窗口本身的事件。所有這些事件都將在懸停、點擊或調(diào)整畫布/窗口大小時觸發(fā)。

當(dāng)將resize設(shè)置為true時，粒子會在剩余空間中調(diào)整自身而不會發(fā)生變形。當(dāng)resize設(shè)置為false時，粒子會改變形狀以適應(yīng)畫布大小的任何變化。

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

mode參數(shù)定義了用戶如何與粒子交互。庫定義了五種交互模式：grab、bubble、repulse、push和remove。

grab模式在您懸停或點擊的點與特定距離內(nèi)的附近粒子之間創(chuàng)建連接線。此模式僅適用于懸停事件。下面的JSON代碼繪制一條不透明度為1的線，以連接800像素內(nèi)的所有粒子。

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

bubble模式會改變特定距離內(nèi)所有粒子的尺寸和不透明度，持續(xù)時間由您決定。repulse模式使粒子遠(yuǎn)離點擊的位置。這兩種模式都可以添加到hover或click中。持續(xù)時間僅適用于這兩種情況下的點擊事件。

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

您可以嘗試更改各種參數(shù)以使演示效果更好。

push模式在每次鼠標(biāo)點擊時添加一定數(shù)量的粒子。粒子將添加到點擊的位置。類似地，remove模式會從畫布中移除粒子。要移除的粒子是隨機選擇的。

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

總結(jié)

本系列教程涵蓋了Particles.js的所有功能。為了避免您日后遇到粒子不相互反彈等問題，我還時不時地提到了一些注意事項。

如果您需要了解我們討論的所有參數(shù)的更多信息，請參閱該庫的文檔。此外，如果您在使用該庫時遇到問題，或者某些功能行為異常，建議您閱讀源代碼以了解其內(nèi)部工作原理。

本文已更新，并收錄了Kingsley Ubah的貢獻。Kingsley熱衷于創(chuàng)作教育和啟發(fā)讀者的內(nèi)容。他的愛好包括閱讀、足球和騎自行車。

以上是粒子：JS：運動和相互作用的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！