顆粒：控製粒子計數和形狀

上篇Particles.js教程簡要介紹了該庫提供的各種功能以及如何開始使用它。本教程將詳細介紹Particles.js中所有與粒子物理外觀相關的方面。

粒子數量、顏色和不透明度

首先，我們將處理粒子的數量和密度。密度決定了在給定區域內聚集在一起的粒子數量。它默認啟用，value_area設置為800。以下JSON代碼允許您控製粒子數量：

<code>"number": {<br>  "value": 50, <br>  "density": {<br>    "enable": true,<br>    "value_area": 500<br>  }<br>}<br></code>

如果您將密度下的enable設置為false，則顯示的粒子數量將恰好為50。將value_area的值加倍將使粒子數量減少大約一半。

有三種方法可以設置粒子的顏色。您可以使用十六進制格式、RGB格式或HSL格式設置顏色。由於庫中的一個錯誤，只有在從庫中刪除默認顏色值時，RGB和HSL格式才有效。

如果您想隨機設置粒子顏色，可以使用值“random”。最後，要從顏色列表中隨機設置顏色，您必須以數組的形式提供十六進制格式的顏色。以下是設置粒子顏色的JSON代碼：

<code>"color": {<br>  "value": "#fff" //使用十六进制设置白色 (我们使用此版本)<br>  "value": {r:255, g:255, b:255} //使用RGB设置白色<br>  "value": {h:0, s:100%, l:100%} //使用HSL设置白色<br>  "value": ["#f00", "#0f0", "#00f"] //随机设置红色、绿色和蓝色<br>  "value": "random" //随机设置颜色<br>}<br></code>

不透明度屬性為您提供了很大的控制權。您可以將其設置為精確值，也可以通過將"random"設置為true來使用隨機值。不僅如此，您還可以設置粒子的不透明度動畫。以下是用於不透明度屬性的JSON代碼：

<code>"opacity": {<br>  "value": 1,<br>  "random": true, // 在我们的例子中设置为false<br>  "anim": {<br>    "enable": true,<br>    "speed": 8,<br>    "opacity_min": 0.4,<br>    "sync": false<br>  }<br>}<br></code>

將"sync"設置為true將同時為所有粒子設置不透明度動畫。使用0.4的值作為"opacity_min"確保在動畫過程中任何粒子的不透明度都不會低於0.4。這是一個星星在太空中移動的演示。嘗試更改粒子的數量、顏色或不透明度以查看它們的效果。

形狀和大小

Particles.js有五個不同的值來創建基本形狀。像circle這樣的簡單形狀會生成一個圓形粒子，triangle會生成三角形粒子，而edge會生成正方形。您可以使用值polygon來創建nb_sides邊的多邊形，您需要提供nb_sides的值。要創建實際的星形，您可以將形狀類型設置為star。 stroke參數會在所有粒子周圍添加給定顏色和寬度的輪廓。下面的JSON代碼將創建六邊形。

<code>"number": {<br>  "value": 50, <br>  "density": {<br>    "enable": true,<br>    "value_area": 500<br>  }<br>}<br></code>

也可以顯示圖像而不是基本形狀。首先，您必須將形狀類型指定為image。之後，您可以設置圖像源及其所需的高度和寬度。值得記住的是，寬度和高度不會決定圖像粒子的尺寸，而是它們的縱橫比。以下是一些使用足球圖像創建粒子的JSON代碼：

<code>"color": {<br>  "value": "#fff" //使用十六进制设置白色 (我们使用此版本)<br>  "value": {r:255, g:255, b:255} //使用RGB设置白色<br>  "value": {h:0, s:100%, l:100%} //使用HSL设置白色<br>  "value": ["#f00", "#0f0", "#00f"] //随机设置红色、绿色和蓝色<br>  "value": "random" //随机设置颜色<br>}<br></code>

該庫還允許您混合多個形狀。例如，您可以決定同時創建圓形、正方形和六邊形。在這種情況下，您只需傳遞包含所有這些形狀的數組即可。

<code>"opacity": {<br>  "value": 1,<br>  "random": true, // 在我们的例子中设置为false<br>  "anim": {<br>    "enable": true,<br>    "speed": 8,<br>    "opacity_min": 0.4,<br>    "sync": false<br>  }<br>}<br></code>

size屬性具有不透明度屬性的所有選項。您可以隨機設置大小以及設置單個粒子的動畫大小。仔細查看以下JSON代碼。

<code>"shape": {<br>  "type": "polygon",<br>  "stroke": {<br>     "width": 4,<br>     "color": "#fff"<br>  },<br>  "polygon": {<br>     "nb_sides": 6<br>  }<br>}<br></code>

如果您將random設置為false，則所有粒子的尺寸都將為25。當random設置為true時，size充當粒子的最大尺寸限制。在動畫中將sync設置為true將同時更改所有元素的大小。您應該打開演示並嘗試多邊形邊的數量、動畫和其他屬性的不同值，以查看它們如何影響最終結果。

連接粒子

當粒子足夠接近時，您可以通過啟用line_linked屬性來繪製它們之間的連接線。

此屬性具有四個附加值。 distance屬性指定將繪製線條的最大距離。您也可以將color設置為十六進製字符串。線條的不透明度會根據粒子之間的距離而變化。您指定為opacity的值是在粒子非常靠近時線條的不透明度。最後，width決定線條的寬度。以下是配套演示的JSON代碼片段。

<code>"shape": {<br>  "type": "image",<br>  "image": {<br>     "src": "img/football.png", // 设置图像路径。<br>     "width": 1,   // 宽度和高度不决定大小。<br>     "height": 1   // 它们只决定纵横比。<br>  }<br>}<br></code>

您可以看到，一旦粒子之間的距離超過200像素，線條就會消失。

總結

我已經盡力涵蓋了更改粒子形狀、大小、顏色以及幾乎所有其他物理屬性所需的一切知識。本教程中的示例清楚地說明了使用此庫是多麼容易。如果您需要一個基本的粒子庫，您絕對應該嘗試一下Particles.js。

下一教程將教您如何控製粒子的運動及其相互之間的交互以及與您的交互。

此文章已更新，並包含Kingsley Ubah的貢獻。 Kingsley熱衷於創作教育和啟發讀者的內容。愛好包括閱讀、足球和騎自行車。

以上是顆粒：控製粒子計數和形狀的詳細內容。更多資訊請關注PHP中文網其他相關文章！