Particles.js : introduction aux bases

De nombreuses petites particules se déplaçant et interagissant entre elles, ou interagissant avec vous, ont une certaine attirance pour elles. Si vous êtes dans une situation où vous devez travailler avec beaucoup de particules, Particles.js vous sera très utile. Comme son nom l'indique, il s'agit d'une bibliothèque JavaScript qui vous aide à créer des systèmes de particules. De plus, il est léger, facile à utiliser et vous offre beaucoup de contrôle.

Dans ce tutoriel, je vais vous présenter toutes les fonctionnalités de cette bibliothèque et vous aider à démarrer. Ce tutoriel est la première partie de la série et couvre uniquement les bases.

Installation et utilisation

Tout d’abord, vous devez héberger la bibliothèque. Vous pouvez télécharger sur votre propre serveur ou utiliser le CDN jsdeliver comme je l'ai fait.

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

Vous devrez également créer un élément DOM où Particles.js créera les particules. Donnez-lui un id facilement identifiable pour référence ultérieure.

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

Maintenant, pour créer un système de particules de base avec les paramètres par défaut, vous n'avez besoin que d'une seule ligne de JavaScript pour initialiser la bibliothèque.

particlesJS();

Par défaut, les particules sont blanches. Ils sont également reliés entre eux par de fins fils blancs. Donc, si vous ne voyez rien pour le moment, remplacez simplement l'arrière-plan par autre chose. C'est le CSS que j'utilise pour styliser les particules div :

#particles-js {
  background: cornflowerblue;
}

Essayez de cliquer quelque part dans la démo ci-dessous. Après chaque clic, Particles.js générera quatre nouvelles particules.

Définir des options personnalisées

Bien qu'il n'ait fallu que quatre lignes de code pour créer la démo précédente, le résultat final n'est peut-être pas celui que vous souhaitez. Les pellets me semblaient un peu trop gros et trop denses. Peut-être souhaitez-vous que les particules aient des formes différentes ou des tailles aléatoires. Particles.js vous permet de définir toutes ces propriétés et bien plus encore en JSON, que vous pouvez référencer lors de l'initialisation. La syntaxe générale pour appeler cette fonction est la suivante :

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

Ici, dom-id 是您希望粒子出现的元素的 id。 path-json 是包含所有配置选项的 JSON 文件的路径，callback est une fonction de rappel facultative. Vous pouvez mettre le code JSON directement dans le deuxième paramètre au lieu du chemin.

Essayons d'utiliser cette superbe bibliothèque pour créer des flocons de neige qui tombent. Tout d'abord, notre fonction ressemble à ceci :

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

J'ai supprimé la fonction de rappel et changé le DOM Id en quelque chose de plus spécifique. Les flocons de neige sont pour la plupart de forme sphérique. Ils tomberont vers le bas et seront de taille inégale. De plus, contrairement à notre première démo, ils ne seront pas connectés par fils.

Particules en mouvement

Initialement, notre fichier snowflakes.json contiendra le code suivant :

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

Toutes les options de configuration liées aux propriétés physiques telles que la forme, la taille et le mouvement seront situées dans articles 内。所有决定交互行为的配置选项都将放在 interactivity.

J'ai fixé le nombre de particules à 100. Cela dépend généralement de l'espace disponible. Comme mentionné précédemment, j'ai également défini la forme sur circle. À ce stade, votre fichier devrait ressembler à ceci :

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

J'ai utilisé une valeur de 10 pour définir la taille des flocons de neige. Puisque les flocons de neige varient en taille, je le ferai random 设置为 true。这样，雪花可以具有零到我们指定的最大限制之间的任何大小。要禁用或删除将这些粒子链接在一起的所有行，您可以将 enable 设置为 false for line_linked.

Pour déplacer des particules, vous devez définir la propriété enable sur true. Sans aucun autre paramètre, les particules se déplaceront de manière aléatoire, comme dans l'espace. Vous pouvez définir la direction de ces particules à l'aide d'une valeur de chaîne, telle que "bottom". Même si le mouvement général des particules est vers le bas, elles doivent néanmoins se déplacer légèrement de manière aléatoire pour paraître naturelles. Ceci peut être réalisé en définissant straight sur false. À ce stade, enable 属性设置为 true。如果没有任何其他设置，粒子将随意移动，就像在太空中一样。您可以使用字符串值设置这些粒子的方向，例如 "bottom"。尽管粒子的一般运动是向下的，但它们仍然需要稍微随机地移动才能看起来自然。这可以通过将 straight 设置为 false 来实现。此时，snowflakes.json aura le code suivant :

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

En utilisant le code JSON ci-dessus, vous obtiendrez les résultats suivants :

更改交互行为

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

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

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!