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 來實現。此時，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中文網其他相關文章！