Particles.js：粒子数と形状を制御します

<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>

を設定してランダム値を使用したりできます。それだけでなく、粒子の不透明度を設定することもできます。不透明なプロパティのJSONコードは次のとおりです "random" true設定

<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>

を使用して、アニメーションプロセス中に粒子の不透明度が0.4を下回らないようにします。これは、宇宙を移動する星のデモです。粒子の数、色、または不透明度を変更して、それらがどのように機能するかを確認してみてください。 "sync" true "opacity_min"

のような単純な形状は、円形粒子を生成し、

は正方形を生成します。値を使用して、circleエッジを持つポリゴンを作成できます。triangleの値を提供する必要があります。実際の星を作成するには、形状タイプをedgeに設定できます。 polygonパラメーターは、すべての粒子の周りに与えられた色と幅の輪郭を追加します。次のJSONコードが六角形を作成します。 nb_sides

<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>

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

を設定すると、すべての粒子のサイズは25になります。 randomがfalseに設定されている場合、サイズは粒子の最大サイズの制限として機能します。アニメーションでrandomにtrueに設定すると、すべての要素のサイズが同時に変更されます。デモを開き、ポリゴンのエッジ、アニメーション、その他のプロパティの数に対して異なる値を試して、最終結果にどのように影響するかを確認する必要があります。 sync true

接続された粒子

粒子が十分に近い場合、

このプロパティには4つの追加値があります。 line_linkedプロパティは、ラインが描画される最大距離を指定します。また、16進の文字列に

であり、粒子が非常に近いときの線の不透明度です。最後に、distanceラインの幅を決定します。以下は、付随するデモのためのJSONコードスニペットです。 color opacity width

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

この記事は更新されており、キングスレーウバからの貢献が含まれています。キングスレーは、読者を教育し、刺激するコンテンツを作成することに情熱を傾けています。趣味には、読書、サッカー、サイクリングが含まれます。