particles.js：動きと相互作用

このチュートリアルでは、Particles.jsに飛び込み、粒子の動き、相互作用パターン、およびイベントを制御する方法を学びます。前のチュートリアルでは、さまざまな形状とサイズの粒子を作成する方法を学びました。しかし、粒子間に相互作用が不足しており、他の粒子がないかのように、それらは互いに通過します。このチュートリアルでは、この欠点を補います。

粒子の動きを制御

粒子システム内のすべての粒子がランダムな方向に移動するわけではありません。ランダムな動きでさえ、他の力があります。たとえば、粒子が互いに近づくと加速したり、衝突後にリバウンドする場合があります。これらのすべてのオプションは、

属性の下のさまざまなパラメーターによって制御できます。 move

粒子を動かしたくない場合は、に設定できます。粒子の速度は、enableパラメーターを使用して指定できます。各粒子をランダムな速度で動かすには、falseをspeedに設定します。一方、それらをランダムな方向に動かすために、randomをtrueを指​​定します。 direction none粒子は最終的にシステム境界に移動します。 パラメーターは、粒子が別の方向からリバウンドするか、表示されるかを決定します。

に設定すると、粒子はキャンバスから出ると、境界を押した後、粒子がリバウンドします。 out_mode out粒子が互いに通過し、速度が変化しないままになっているのは不自然に思えます。各衝突で粒子速度を変更するには、bounceを

に設定します。興味深いことに、この設定は、

またはbounceプロパティが有効になっている場合にのみ有効です。粒子が衝突するたびに、正面衝突ではない場合でも、方向は逆転します。 true line_linked最後に、魅力を議論しましょう。魅力が有効になると、他の粒子がその近くに存在すると、粒子はその速度を変化させます。他のパラメーターの値に応じて、変更は正または負になる場合があります。各方向の魅力は、それぞれのパラメーターattractionおよび

の値に反比例します。デフォルト値が高いため、明らかなアトラクションが観察されます。一方、これらの値が低すぎると、粒子は一定期間後に非常に高い速度を得ます。

rotateX rotateY

が

および

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

に設定されている場合、同時に粒子が動かないことを覚えておいてください。

straighttrueインタラクティブなイベントとパターンdirectionnone

ユーザーは粒子と対話できますか？答えはイエスです。 particles.jsは、hover、click、resizeの3つのイベントに応答できます。パラメーターの値を設定することにより、キャンバスまたはウィンドウ自体のイベントを検出できます。これらのすべてのイベントは、キャンバス/ウィンドウをホバリング、クリック、またはサイズ変更するときにトリガーされます。 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
  }
}

パラメーターは、ユーザーが粒子との相互作用方法を定義します。ライブラリは、5つの相互作用モードの定義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のすべての機能をカバーしています。粒子などの問題を随時回復しないようにするために、時々いくつかの予防策に言及しました。

説明したすべてのパラメーターに関する詳細情報が必要な場合は、このライブラリのドキュメントを参照してください。さらに、ライブラリの使用に問題がある場合、または一部の機能が異常に動作する場合は、ソースコードを読んで内部でどのように機能するかを理解することをお勧めします。

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

以上がparticles.js：動きと相互作用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。