Particles.js: Contrôle le nombre et la forme des particules

Le didacticiel précédent Particules.js a brièvement couvert les différentes fonctionnalités fournies par la bibliothèque et comment démarrer avec. Ce tutoriel fournira une introduction détaillée à tous les aspects liés à l'apparence physique des particules dans les particules.js.

Numéro de particules, couleur et opacité

Tout d'abord, nous gérerons le nombre et la densité des particules. La densité détermine le nombre de particules qui se rassemblent dans une région donnée. Il est activé par défaut et value_area est défini sur 800. Le code JSON suivant vous permet de contrôler le nombre de particules:

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

Si vous définissez enable en densité à false, le nombre de particules affichées sera exactement de 50. Double la valeur de value_area réduira le nombre de particules d'environ la moitié.

Il existe trois façons de définir la couleur des particules. Vous pouvez définir la couleur à l'aide du format hexadécimal, du format RVB ou du format HSL. En raison d'une erreur dans la bibliothèque, les formats RVB et HSL ne sont valides que lorsque la valeur de couleur par défaut est supprimée de la bibliothèque.

Si vous souhaitez définir la couleur des particules au hasard, vous pouvez utiliser la valeur "aléatoire". Enfin, pour définir la couleur au hasard à partir de la liste des couleurs, vous devez fournir la couleur au format hexadécimal comme un tableau. Ce qui suit est le code JSON pour régler la couleur des particules:

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

L'attribut d'opacité vous donne beaucoup de contrôle. Vous pouvez le définir sur une valeur exacte ou utiliser une valeur aléatoire en définissant "random" à true. Non seulement cela, vous pouvez également définir l'opacité des particules. Voici le code JSON pour les propriétés d'opacité:

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

Le réglage "sync" à true définira les animations d'opacité pour toutes les particules en même temps. Utilisez une valeur de 0,4 comme "opacity_min" pour vous assurer que l'opacité des particules ne tombe pas en dessous de 0,4 pendant le processus d'animation. Ceci est une démonstration d'étoiles se déplaçant dans l'espace. Essayez de changer le nombre, la couleur ou l'opacité des particules pour voir comment elles fonctionnent.

forme et taille

Particles.js a cinq valeurs différentes pour créer des formes de base. Une forme simple comme circle produira une particule circulaire, triangle produira une particule de triangle et edge produira un carré. Vous pouvez utiliser la valeur polygon pour créer un polygone avec nb_sides bord, vous devez fournir une valeur de nb_sides. Pour créer une étoile réelle, vous pouvez définir le type de forme sur star. Le paramètre stroke ajoute un contour de la couleur et de la largeur données autour de toutes les particules. Le code JSON suivant créera l'hexagone.

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

peut également afficher des images au lieu de formes de base. Tout d'abord, vous devez spécifier le type de forme comme image. Après cela, vous pouvez définir la source d'image et sa hauteur et sa largeur souhaitées. Il convient de se rappeler que la largeur et la hauteur ne déterminent pas la taille des particules d'image, mais leur rapport d'aspect. Voici quelques codes JSON qui utilisent des images de football pour créer des particules:

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

Cette bibliothèque vous permet également de mélanger plusieurs formes. Par exemple, vous pouvez décider de créer des cercles, des carrés et des hexagones en même temps. Dans ce cas, vous ne faites que passer un tableau contenant toutes ces formes.

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

La propriété

taille a toutes les options pour la propriété Opacity. Vous pouvez régler la taille au hasard et définir la taille de l'animation d'une seule particule. Consultez attentivement le code JSON suivant.

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

Si vous définissez random sur false, toutes les particules auront une taille de 25. Lorsque random est réglé sur true, la taille agit comme la limite de taille maximale pour la particule. Le réglage sync sur true dans l'animation modifiera la taille de tous les éléments en même temps. Vous devez ouvrir la démo et essayer différentes valeurs pour le nombre de bords de polygone, d'animations et d'autres propriétés pour voir comment elles affectent le résultat final.

particules connectées

Lorsque les particules sont suffisamment proches, vous pouvez tracer les lignes de connexion entre elles en activant la propriété line_linked.

Cette propriété a quatre valeurs ajoutées. La propriété distance spécifie la distance maximale à laquelle la ligne sera tracée. Vous pouvez également définir color sur une chaîne hexadécimale. L'opacité des lignes varie en fonction de la distance entre les particules. La valeur que vous spécifiez comme opacity est l'opacité de la ligne lorsque la particule est très proche. Enfin, width détermine la largeur de la ligne. Ce qui suit est un extrait de code JSON pour la démonstration d'accompagnement.

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

Vous pouvez voir qu'une fois que la distance entre les particules dépasse 200 pixels, les lignes disparaissent.

Résumé

J'ai fait de mon mieux pour couvrir tout ce que vous devez savoir pour changer la forme, la taille, la couleur des particules et presque toutes les autres propriétés physiques. Les exemples de ce tutoriel illustrent clairement à quel point il est facile d'utiliser cette bibliothèque. Si vous avez besoin d'une bibliothèque de particules de base, vous devriez certainement essayer les particules.js.

Le prochain tutoriel vous apprendra à contrôler le mouvement des particules et leurs interactions entre eux et vos interactions.

Cet article a été mis à jour et contient des contributions de Kingsley Ubah. Kingsley est passionnée par la création de contenu qui éduque et inspire les lecteurs. Les passe-temps incluent la lecture, le football et le vélo.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!