粒子：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中文網其他相關文章！