Particles.js: mouvement et interaction

Dans ce tutoriel, nous plongerons dans les particules.js et apprendrons à contrôler le mouvement des particules, les modèles d'interaction et les événements. Dans le tutoriel précédent, nous avons appris à créer des particules de formes et de tailles variables. Cependant, il y a un manque d'interaction entre les particules, et ils se traversent, comme s'il n'y avait pas d'autres particules. Ce tutoriel compensera cette lacune.

Mouvement des particules de contrôle

Toutes les particules d'un système de particules ne se déplacent pas dans une direction aléatoire. Même pour le mouvement aléatoire, il existe d'autres forces. Par exemple, les particules peuvent accélérer lors de l'approche les unes les autres ou du rebond après une collision. Toutes ces options peuvent être contrôlées par divers paramètres sous l'attribut move.

Si vous ne voulez pas que les particules se déplacent, vous pouvez définir enable pour false. La vitesse des particules peut être spécifiée à l'aide du paramètre speed. Pour faire bouger chaque particule à une vitesse aléatoire, définissez random sur true. D'un autre côté, pour les faire bouger dans une direction aléatoire, spécifiez direction comme none.

Les particules finiront par se déplacer vers la limite du système. Les paramètres out_mode déterminent si la particule rebondit ou apparaît à partir d'une autre direction. Lorsqu'ils sont réglés sur out, les particules se déplacent hors de la toile; bounce

Il semble contre nature que les particules se traversent tandis que la vitesse reste inchangée. Pour changer la vitesse des particules à chaque collision, définissez

à bounce. Fait intéressant, ce paramètre n'est valide que lorsque les propriétés true ou line_linked sont activées. Chaque fois qu'une particule entre en collision, elle inverse sa direction, même si ce n'est pas une collision frontale. attraction

Enfin, discutons de l'attractivité. Lorsque l'attractivité est activée, la particule modifie sa vitesse lorsque d'autres particules existent à proximité. Le changement peut être positif ou négatif, selon la valeur d'autres paramètres. L'attraction de chaque direction est inversement proportionnelle aux valeurs des paramètres respectifs

et rotateX. La valeur par défaut est élevée pour que l'attraction évidente soit observée. D'un autre côté, si ces valeurs sont réglées trop faibles, les particules auront des vitesses très élevées après une période de temps. rotateY

Le code JSON pour le mouvement des particules ci-dessus est le suivant:

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

N'oubliez pas que lorsque

est défini sur straight et true à direction en même temps, les particules ne bougeront pas. none

Événements et modèles interactifs

L'utilisateur peut-il interagir avec les particules? La réponse est oui. Particles.js peut répondre à trois événements: hover, click et resize. En définissant la valeur du paramètre detect_on, les événements dans la toile ou la fenêtre lui-même peuvent être détectés. Tous ces événements seront déclenchés lors du plan de planage, de cliquer ou de redimensionner la toile / fenêtre.

Lorsque resize est réglé sur true, les particules s'ajustent dans l'espace restant sans se déformer. Lorsque resize est réglé sur false, les particules modifient la forme en fonction des changements de taille de la toile.

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

Les paramètres

mode définissent comment les utilisateurs interagissent avec les particules. La bibliothèque définit cinq modes d'interaction: grab, bubble, repulse, push, remove et

.

Le mode grab

crée une ligne de connexion entre le point de planage ou de cliquer et les particules à proximité à une distance spécifique. Ce mode ne s'applique qu'aux événements en volants. Le code JSON ci-dessous trace une ligne avec une opacité de 1 pour connecter toutes les particules à moins de 800 pixels.

"detect_on": "canvas",
"events": {
  "onhover": {
    "enable": true,
    "mode": "repulse"
  },
  "onclick": {
    "enable": true,
    "mode": "push"
  },
  "resize": true
}

Le mode bubble repulse modifie la taille et l'opacité de toutes les particules à une distance spécifique, la durée dépend de vous. Le mode hover éloigne les particules de la position de clic. Les deux modes peuvent être ajoutés à click ou

. La durée s'applique uniquement aux événements de clic dans les deux cas.

"grab": {
  "distance": 800,
  "line_linked": {
    "opacity": 1
  }
}

Vous pouvez essayer de modifier divers paramètres pour améliorer la démo.

Le mode push remove ajoute un certain nombre de particules chaque fois que la souris clique. Les particules seront ajoutées à la position cliquée. De même, le mode

élimine les particules de la toile. Les particules à éliminer sont sélectionnées au hasard.

"bubble": {
  "distance": 600,
  "size": 60,
  "duration": 0.1,
  "opacity": 1
},
"repulse": {
  "distance": 500,
  "duration": 0.5
}

Résumé

Cette série de tutoriels couvre toutes les caractéristiques des particules.js. Afin d'éviter des problèmes tels que les particules qui ne rebondissent pas de temps à autre, j'ai également mentionné de temps à autre certaines précautions.

Si vous avez besoin de plus d'informations sur tous les paramètres dont nous discutons, veuillez vous référer à la documentation de cette bibliothèque. De plus, si vous avez des problèmes d'utilisation de la bibliothèque ou si certaines fonctionnalités se comportent anormalement, il est recommandé de lire le code source pour comprendre comment il fonctionne en interne.

Cet article a été mis à jour et comprend les contributions de Kingsley Ubah. Kingsley est passionnée par la création de contenu qui éduque et inspire les lecteurs. Ses 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!