Particles.js: Pengenalan kepada Asas

Banyak zarah kecil bergerak dan berinteraksi antara satu sama lain, atau berinteraksi dengan anda, yang mempunyai daya tarikan tertentu kepada mereka. Jika anda menghadapi situasi di mana anda perlu bekerja dengan sejumlah besar zarah, Particles.js akan memberi perkhidmatan kepada anda dengan baik. Seperti yang anda boleh ketahui daripada namanya, ia adalah perpustakaan JavaScript yang membantu anda mencipta sistem zarah. Selain itu, ia ringan, mudah digunakan dan memberi anda banyak kawalan.

Dalam tutorial ini, saya akan memperkenalkan semua ciri perpustakaan ini dan membantu anda bermula. Tutorial ini adalah bahagian pertama siri ini dan hanya merangkumi perkara asas.

Pemasangan dan penggunaan

Pertama, anda perlu menjadi hos perpustakaan. Anda boleh memuat naik ke pelayan anda sendiri atau menggunakan jsdeliver CDN seperti yang saya lakukan.

<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

Anda juga perlu mencipta elemen DOM di mana Particles.js akan mencipta zarah. Berikannya id yang mudah dikenal pasti untuk rujukan kemudian.

<div id="particles-js"></div> 

Kini, untuk mencipta sistem zarah asas dengan tetapan lalai, anda hanya memerlukan satu baris JavaScript untuk memulakan pustaka.

particlesJS();

Secara lalai, zarah berwarna putih. Mereka juga disambungkan antara satu sama lain dengan wayar putih nipis. Jadi jika anda tidak nampak apa-apa sekarang, tukar saja latar belakang kepada yang lain. Ini ialah CSS yang saya gunakan untuk menggayakan zarah div: id 以供稍后参考。

#particles-js {
  background: cornflowerblue;
}

现在，要创建具有默认设置的基本粒子系统，您只需要一行 JavaScript 即可初始化库。

particlesJS(dom-id, path-json, callback (optional));

默认情况下，粒子是白色的。它们还通过细白线相互连接。因此，如果您现在没有看到任何内容，只需将背景更改为其他内容即可。这是我用于设置粒子 div 样式的 CSS：

particlesJS("snowfall", 'assets/snowflakes.json');

尝试单击下面演示中的某个位置。每次点击后，Particles.js 都会再生成四个新粒子。

设置自定义选项

尽管创建之前的演示只用了四行代码，但最终结果可能不是您想要的。对我来说，这些颗粒似乎有点太大而且太密集了。也许您希望粒子具有不同的形状或具有随机大小。 Particles.js 允许您在 JSON 中设置所有这些以及更多属性，您可以在初始化期间引用这些属性。调用该函数的一般语法如下所示：

{
  "particles": {
  
  },
  "interactivity": {
    
  }
}

这里，dom-id 是您希望粒子出现的元素的 id。 path-json 是包含所有配置选项的 JSON 文件的路径，callback 是可选的回调函数。您可以直接将 JSON 代码放入第二个参数中，而不是路径。

让我们尝试使用这个很棒的库来创建飘落的雪花。首先，我们的函数如下所示：

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    }
  },
  "interactivity": {
    
  }
}

我已经删除了回调函数，并将 DOM Id 更改为更具体的名称。雪花大多呈球形。它们会向下掉落并且尺寸不均匀。此外，与我们的第一个演示不同的是，它们不会通过线路连接。

移动粒子

一开始，我们的 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": {
    
  }
}

所有与形状、大小和运动等物理属性相关的配置选项都将位于 articles 内。所有决定交互行为的配置选项都将放在 interactivity 中。

我将粒子数量设置为 100。这通常取决于可用空间。如前所述，我还将形状设置为 circle。此时，您的文件应如下所示：

{
  "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
      }
    }
  }
}

我使用值 10 来设置雪花的大小。由于雪花大小不同，我将 random 设置为 true。这样，雪花可以具有零到我们指定的最大限制之间的任何大小。要禁用或删除将这些粒子链接在一起的所有行，您可以将 enable 设置为 false for line_linked。

要移动粒子，您必须将 enable 属性设置为 true。如果没有任何其他设置，粒子将随意移动，就像在太空中一样。您可以使用字符串值设置这些粒子的方向，例如 "bottom"。尽管粒子的一般运动是向下的，但它们仍然需要稍微随机地移动才能看起来自然。这可以通过将 straight 设置为 false 来实现。此时，snowflakes.json rrreee

Cuba klik di mana-mana dalam demo di bawah. Selepas setiap klik, Particles.js akan menghasilkan empat zarah baharu.

Tetapkan pilihan tersuai

#🎜🎜#Walaupun hanya memerlukan empat baris kod untuk mencipta demo sebelumnya, hasil akhirnya mungkin tidak seperti yang anda mahukan. Pelet kelihatan agak terlalu besar dan terlalu padat untuk saya. Mungkin anda mahu zarah mempunyai bentuk yang berbeza atau mempunyai saiz rawak. Particles.js membolehkan anda menetapkan semua sifat ini dan banyak lagi dalam JSON, yang boleh anda rujuk semasa pemulaan. Sintaks umum untuk memanggil fungsi ini adalah seperti berikut: #🎜🎜# rrreee #🎜🎜#Di sini, dom-id ialah id bagi elemen yang anda mahu zarah muncul. path-json ialah laluan ke fail JSON yang mengandungi semua pilihan konfigurasi dan panggilan balik ialah fungsi panggil balik pilihan. Anda boleh meletakkan kod JSON terus ke dalam parameter kedua dan bukannya laluan. #🎜🎜# #🎜🎜# Mari cuba gunakan perpustakaan hebat ini untuk mencipta kepingan salji yang jatuh. Pertama, fungsi kami kelihatan seperti ini: #🎜🎜# rrreee #🎜🎜#Saya telah mengalih keluar fungsi panggil balik dan menukar DOM Id kepada nama yang lebih khusus. Kepingan salji kebanyakannya berbentuk sfera. Mereka akan jatuh ke bawah dan saiznya tidak sekata. Selain itu, tidak seperti demo pertama kami, mereka tidak akan disambungkan dengan wayar. #🎜🎜# #🎜🎜#zarah bergerak#🎜🎜# #🎜🎜# Pada mulanya, fail snowflakes.json kami akan mengandungi kod berikut: #🎜🎜# rrreee #🎜🎜#Semua pilihan konfigurasi yang berkaitan dengan sifat fizikal seperti bentuk, saiz dan gerakan akan terletak dalam artikel. Semua pilihan konfigurasi yang menentukan tingkah laku interaktif akan diletakkan dalam interaktiviti. #🎜🎜# #🎜🎜#Saya tetapkan bilangan zarah kepada 100. Ini biasanya bergantung pada ruang yang ada. Seperti yang dinyatakan sebelum ini, saya juga menetapkan bentuk kepada bulatan. Pada ketika ini, fail anda sepatutnya kelihatan seperti ini: #🎜🎜# rrreee #🎜🎜#Saya menggunakan nilai 10 untuk menetapkan saiz kepingan salji. Memandangkan kepingan salji berbeza dari segi saiz, saya menetapkan rawak kepada true. Dengan cara ini, kepingan salji boleh mempunyai sebarang saiz antara sifar dan had maksimum yang kami tentukan. Untuk melumpuhkan atau mengalih keluar semua baris yang memautkan zarah ini bersama-sama, anda boleh menetapkan dayakan kepada false untuk line_linked. #🎜🎜# #🎜🎜#Untuk mengalihkan zarah, anda mesti menetapkan atribut dayakan kepada true. Tanpa sebarang tetapan lain, zarah akan bergerak secara rawak, sama seperti di angkasa. Anda boleh menetapkan arah zarah ini menggunakan nilai rentetan, seperti "bottom". Walaupun pergerakan umum zarah adalah ke bawah, mereka masih perlu bergerak sedikit secara rawak untuk kelihatan semula jadi. Ini boleh dicapai dengan menetapkan lurus kepada false. Pada ketika ini, snowflakes.json akan mempunyai kod berikut: #🎜🎜# rrreee #🎜🎜#Menggunakan kod JSON di atas, anda akan mendapat keputusan berikut: #🎜🎜# #🎜🎜##🎜🎜##🎜🎜##🎜🎜#

更改交互行为

如果将鼠标悬停在上面的演示上，您会注意到线条仍然存在，但仅在悬停期间暂时显示。要完全删除它们，您可以将 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 很简单。如果您以前从未使用过粒子系统，这个库将帮助您立即入门。本教程只是对该库的基本介绍。在本系列的接下来的两个教程中，我将更详细地介绍该库的所有方面。

如果您对本教程有任何疑问，请在论坛上告诉我。

Atas ialah kandungan terperinci Particles.js: Pengenalan kepada Asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!