Particles.js: 基本の紹介

たくさんの小さな粒子が動き回って、相互作用したり、あなたと相互作用したりするものには、ある種の引力があります。多数のパーティクルを操作する必要がある状況に遭遇した場合は、Particles.js が役立ちます。名前からわかるように、これはパーティクル システムの作成に役立つ JavaScript ライブラリです。さらに、軽量で使いやすく、さまざまな制御が可能です。

このチュートリアルでは、このライブラリのすべての機能を紹介し、使い始めるのに役立ちます。このチュートリアルはシリーズの最初の部分であり、基本事項のみを説明します。

インストールと使用方法

まず、ライブラリをホストする必要があります。自分のサーバーにアップロードすることも、私のように jsdeliver CDN を使用することもできます。

リーリー

Particles.js がパーティクルを作成する DOM 要素も作成する必要があります。後で参照できるように、簡単に識別できる id を付けます。

リーリー

ここで、デフォルト設定で基本的なパーティクル システムを作成するには、ライブラリを初期化するための JavaScript を 1 行だけ必要とします。

リーリー

デフォルトでは、パーティクルは白です。また、それらは細い白いワイヤーによって互いに接続されています。したがって、今何も表示されない場合は、背景を別のものに変更してください。これは、パーティクル div:

のスタイルを設定するために使用する CSS です。 リーリー

以下のデモのどこかをクリックしてみてください。クリックするたびに、Particles.js は 4 つの新しいパーティクルを生成します。

カスタム オプションを設定する

前のデモの作成には 4 行のコードしか必要としませんでしたが、最終結果は期待どおりではない可能性があります。ペレットは私には少し大きすぎて密度が高すぎるように思えました。パーティクルの形状を異なるものにしたり、サイズをランダムにしたりする場合があります。 Particles.js を使用すると、これらすべてのプロパティなどを JSON で設定でき、初期化中に参照できます。この関数を呼び出すための一般的な構文は次のとおりです:

リーリー

ここで、dom-id は、パーティクルを表示する要素の ID です。 path-json は、すべての構成オプションを含む JSON ファイルへのパスです。callback は、オプションのコールバック関数です。パスの代わりに JSON コードを 2 番目のパラメータに直接入力できます。

この素晴らしいライブラリを使用して、降る雪の結晶を作成してみましょう。まず、関数は次のようになります:

リーリー

コールバック関数を削除し、DOM Id をより具体的なものに変更しました。雪の結晶はほとんどが球形です。それらは下に落ちてしまい、サイズが不均一になります。また、最初のデモとは異なり、有線で接続されません。

粒子の移動

最初、snowflakes.json ファイルには次のコードが含まれます:

リーリー

形状、サイズ、動きなどの物理的プロパティに関連するすべての構成オプションは、articles 内にあります。インタラクティブな動作を決定するすべての構成オプションは、interactivity に配置されます。

パーティクルの数を 100 に設定しました。通常、これは利用可能なスペースによって異なります。前に述べたように、形状も circle に設定しました。この時点で、ファイルは次のようになります:

リーリー

値 10 を使用して雪片のサイズを設定しました。雪の結晶のサイズはさまざまなので、random を true に設定します。このようにして、雪の結晶はゼロから指定した最大制限までの任意のサイズを持つことができます。これらのパーティクルをリンクするすべてのラインを無効にするか削除するには、line_linked の enable を false に設定します。

パーティクルを移動するには、enable プロパティを true に設定する必要があります。他の設定を行わない場合、パーティクルは空間内と同じようにランダムに移動します。 "bottom" などの文字列値を使用して、これらのパーティクルの方向を設定できます。パーティクルの一般的な動きは下向きですが、自然に見えるようにするには、パーティクルがわずかにランダムに動く必要があります。これを行うには、straight を false に設定します。この時点で、snowflakes.json には次のコードが含まれます:

リーリー

上記の 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 中国語 Web サイトの他の関連記事を参照してください。