Particles.js: Einführung in die Grundlagen

Viele winzige Partikel, die sich bewegen und miteinander oder mit Ihnen interagieren, üben eine gewisse Anziehungskraft auf sie aus. Wenn Sie in eine Situation geraten, in der Sie mit einer großen Anzahl von Partikeln arbeiten müssen, wird Ihnen Particles.js gute Dienste leisten. Wie Sie am Namen erkennen können, handelt es sich um eine JavaScript-Bibliothek, die Sie bei der Erstellung von Partikelsystemen unterstützt. Außerdem ist es leicht, einfach zu bedienen und bietet Ihnen viel Kontrolle.

In diesem Tutorial stelle ich alle Funktionen dieser Bibliothek vor und helfe Ihnen beim Einstieg. Dieses Tutorial ist der erste Teil der Serie und behandelt nur die Grundlagen.

Installation und Verwendung

Zuerst müssen Sie die Bibliothek hosten. Sie können auf Ihren eigenen Server hochladen oder jsdeliver CDN verwenden, wie ich es getan habe.

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

Sie müssen außerdem ein DOM-Element erstellen, in dem Particles.js die Partikel erstellt. Geben Sie ihm zur späteren Bezugnahme ein leicht identifizierbares id.

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

Um nun ein grundlegendes Partikelsystem mit Standardeinstellungen zu erstellen, benötigen Sie nur eine Zeile JavaScript, um die Bibliothek zu initialisieren.

particlesJS();

Standardmäßig sind Partikel weiß. Sie sind außerdem durch dünne weiße Drähte miteinander verbunden. Wenn Sie also gerade nichts sehen, ändern Sie einfach den Hintergrund in einen anderen. Dies ist das CSS, das ich zum Stylen der Partikel verwende div:

#particles-js {
  background: cornflowerblue;
}

Versuchen Sie, irgendwo in der Demo unten zu klicken. Nach jedem Klick generiert Particles.js vier neue Partikel.

Benutzerdefinierte Optionen festlegen

Obwohl die Erstellung der vorherigen Demo nur vier Zeilen Code erforderte, entspricht das Endergebnis möglicherweise nicht Ihren Wünschen. Die Pellets kamen mir etwas zu groß und zu dicht vor. Vielleicht möchten Sie, dass die Partikel unterschiedliche Formen oder zufällige Größen haben. Mit Particles.js können Sie alle diese und weitere Eigenschaften in JSON festlegen, auf die Sie während der Initialisierung verweisen können. Die allgemeine Syntax zum Aufrufen dieser Funktion lautet wie folgt:

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

Hier ist dom-id 是您希望粒子出现的元素的 id。 path-json 是包含所有配置选项的 JSON 文件的路径，callback eine optionale Rückruffunktion. Sie können den JSON-Code anstelle des Pfads direkt in den zweiten Parameter einfügen.

Versuchen wir, mit dieser tollen Bibliothek fallende Schneeflocken zu erzeugen. Zunächst sieht unsere Funktion so aus:

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

Ich habe die Rückruffunktion entfernt und das DOM Id in etwas Spezifischeres geändert. Schneeflocken haben meist eine kugelförmige Form. Sie fallen nach unten und sind ungleichmäßig groß. Außerdem sind sie im Gegensatz zu unserer ersten Demo nicht durch Kabel verbunden.

Bewegte Teilchen

Zunächst enthält unsere snowflakes.json-Datei den folgenden Code:

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

Alle Konfigurationsoptionen im Zusammenhang mit physikalischen Eigenschaften wie Form, Größe und Bewegung befinden sich in articles 内。所有决定交互行为的配置选项都将放在 interactivity.

Ich habe die Anzahl der Partikel auf 100 gesetzt. Dies hängt in der Regel vom verfügbaren Platz ab. Wie bereits erwähnt, habe ich auch die Form auf circle eingestellt. Zu diesem Zeitpunkt sollte Ihre Datei so aussehen:

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

Ich habe einen Wert von 10 verwendet, um die Größe der Schneeflocken festzulegen. Da Schneeflocken unterschiedlich groß sind, werde ich random 设置为 true。这样，雪花可以具有零到我们指定的最大限制之间的任何大小。要禁用或删除将这些粒子链接在一起的所有行，您可以将 enable 设置为 false for line_linked.

Um Partikel zu verschieben, müssen Sie die Eigenschaft enable auf true setzen. Ohne weitere Einstellungen bewegen sich die Partikel zufällig, genau wie im Weltraum. Sie können die Richtung dieser Partikel mithilfe eines Zeichenfolgenwerts festlegen, z. B. "bottom". Auch wenn die allgemeine Bewegung der Partikel nach unten gerichtet ist, müssen sie sich dennoch leicht zufällig bewegen, um natürlich auszusehen. Dies kann erreicht werden, indem straight auf false gesetzt wird. Zu diesem Zeitpunkt wird enable 属性设置为 true。如果没有任何其他设置，粒子将随意移动，就像在太空中一样。您可以使用字符串值设置这些粒子的方向，例如 "bottom"。尽管粒子的一般运动是向下的，但它们仍然需要稍微随机地移动才能看起来自然。这可以通过将 straight 设置为 false 来实现。此时，snowflakes.json den folgenden Code haben:

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

Mit dem obigen JSON-Code erhalten Sie die folgenden Ergebnisse:

更改交互行为

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

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

Das obige ist der detaillierte Inhalt vonParticles.js: Einführung in die Grundlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!