Vor kurzem sah ich eine Partikelgitteranimation sehr schillernd, und ich machte einen, und es war ziemlich gut wie der Hintergrund. CSDN kann nicht mehr als 2 m Bilder hochladen, also schneiden Sie einfach ein statisches Bild aus:
Wir beginnen zu sagen, wie man diesen Effekt erzielt:
Fügen Sie zunächst natürlich eine Leinwand hinzu:
<Canvas id = canvas> </canvas>
Der folgende Stil:
<Stil> #Canvas {Position: Absolut;Die Rolle des z -Index: -1 der obigen Leinwand ist, dass es unter dem Hintergrund einiger Elemente platziert werden kann.
Um sicherzustellen, dass Leinwand mit dem gesamten Browser gefüllt werden kann, muss die weite Höhe der Leinwand auf das gleiche festlegen wie der Browser:
Funktion getSize () {w = canvas.width = window.innnerwidth;Das obige W und H repräsentieren die Breite des Browsers.
Holen Sie sich die Breite des Browsers, und der nächste Schritt besteht darin, Partikel zu zeichnen.
Var opt = {partheamount: 50, // die Anzahl der Partikel Standardspeed: 1, // Die Partikelbewegungsgeschwindigkeit Variantespeed: 1, // die Variable der Partikelbewegungsgeschwindigkeit: RGB (32,245,245), // die Farbe der Partikel Linecolor: RGB (32,245,245), // die Farbe des Netzverbindungsverbindungsdefaultradius: 2, // Das Partikelradius variantradius: 2, // die Variable des Partikelradius -Mindistanz: 200 // der Minimumabstand zwischen den Partikeln};Die oben genannten Geschwindigkeitsvariablen und Radiusvariablen sollen sicherstellen, dass die Größe und Geschwindigkeit der Partikel nicht genau gleich sind.
Dann erstellen wir eine Klasse, um Partikel zu initialisieren.
Funktion partical () {this.x = math.random ()*w; .Speed = optionSpeed + opt.Variantspeed*math.random (); Color = opt.Particlecolor; ), // Partikelgeschwindigkeit bei der x -axis y: this.speed * math.sin (this.Directionangle) // Die Geschwindigkeit der Partikel am y -axis} this.update = function () {// Partikel -Update -Funktion this.border (); moment this.y += this.Vector.y; (this.x> = w || this.x <= 0) {// Die negative Zahl this.vector.x *= -1;} if (this.y> = h || this.y <= 0) {// Wenn es die oberen und unteren Ränder erreicht, machen ist der Betrieb, das Browserfenster in der Größe der Größe zu ändern, und einige Partikel nach der Größe des Fensters werden versteckt. if (this.x <0) {this.x = 0;} if (this.y <0) {this.yy = 0;} this.draw = function () {// Zeichnen Sie die Funktion der Partikel ctx. beginPath ();1. Die Anfangsgeschwindigkeit und der Winkel jedes Partikels werden zufällig erzeugt und die Farbe der Partikel wird durch die relevanten Einstellungsoptionen bestimmt.
2. Dieser Vektor wird verwendet, um die Bewegungsrichtung der Partikel zu speichern: Wenn dieser.x 1 ist, bewegen sich die Partikel nach rechts; In ähnlicher Weise bewegen sich die Partikel nach oben, und wenn es positiv ist, bewegen sich die Partikel nach unten.
Mit diesem update wird die Koordinaten der nächsten Position jedes Partikels aktualisiert. Zunächst wird die Kantenerkennung durchgeführt;
3. Das Fensterzoom kann dazu führen, dass die Partikel die Grenze überschreiten, sodass die Kantenerkennungsfunktion nicht erfasst werden kann. Daher ist eine Reihe von Anweisungen erforderlich, um diese Situation zu erfassen und die Position der Partikel in die aktuelle Leinwandgrenze zurückzusetzen.
4. Zeichnen Sie diese Punkte im letzten Schritt auf die Leinwand.
Die Partikel der Partikel wurden geschrieben, und er wird ihn unten ziehen:
Funktion init () {getSize ();Die obige Initialisierung von opticalAmount hat ein Teilchenobjekt, das das Objekt initialisiert, aber nicht gezeichnet ist.
Funktionsschleife () {ctx.ClearRect (0,0, W, H); Draw ();} Fenster.RequestanimationFrame (Loop);};Jedes Mal, wenn die Loop () -Funktion ausgeführt wird, wird der Inhalt auf der Leinwand entfernt, und dann wird die Partikelkoordinate durch die Funktion update () des Partikelsobjekts regel des Teilchenobjekts. Das Folgende ist der Effekt zu diesem Zeitpunkt:
Nachdem sich die Größe des Browserfensters ändert, verschwinden einige Partikel zu diesem Zeitpunkt ein Ereignis, um zu überwachen, ob sich die Browsergröße ändert:
Window.adDeVentListener (Größe, function () {WinResize ()}, false);Anschließend müssen Sie die WinResize () -Funktion schreiben und mehr konsumierte Leistung. Browsergröße.
Var Partlle = [], W, H; Höhe, es gibt eine Einführung in}, Verzögerung)} oben im Artikel
Auf diese Weise ist die gesamte Partikelanimation abgeschlossen, und dann können wir eine Linie zwischen den Partikeln zeichnen. wird es zwischen ihnen ziehen.
Wie man den Abstand zwischen den beiden Partikeln berechnet, können Sie über die erste Lektion der Mathematik der Junior High School nachdenken die dritte Änderung.
Wir kennen jetzt die Koordinaten der x -Achse und der Y -Achse jedes Partikels, dann können wir den Abstand zwischen den beiden Punkten berechnen, eine Funktion schreiben und die beiden Punkte wie folgt übergeben:
Funktion getDistance (point1, point2) {return math.sqrt (math.pow (point1.x -point2.x, 2) + math.pow (point1.y -point2.y, 2));};};Jetzt können wir den Abstand zwischen zwei Punkten berechnen, sodass wir den Abstand zwischen allen Partikeln und allen anderen Partikeln berechnen, um festzustellen, ob sie sich anschließen müssen. Ein bisschen ist hässlich, sodass wir die Transparenz der Verbindung entsprechend dem Abstand zwischen den beiden Partikeln bestimmen können. Eine bestimmte Entfernung wird nicht angezeigt.
Funktionslinie (Punkt, Hub) {für (let i = 0; i <Hub.Length; i ++) {let distance = getDistance (Punkt, Hub [i]); (if (Opazität> 0) {ctx.linewidth = 0,5; ; }}}}}}}}Die beiden oben übertragenen Parameter sind das Array von einem Punkt und der gesamte Punkt, wobei die Opazität = 1 -Display/Options -Option verwendet wird; ist negativ, und die folgenden Urteile werden herausgefiltert.
var line = option.lineColor.match (// d+/g);
Schließlich wird der Abstand der Entfernung in der Loop () -Funktion kontinuierlich zirkuliert.
Funktionsschleife () {ctx.ClearRect (0,0, W, H); Draw ();} für (sei i = 0; i <Partikel.Length; i ++) {// Fügen Sie diesen zyklischen Linienpunkt (Partikel [i], Partikel)} Fenster hinzu.Es sollte darauf hingewiesen werden, dass, wenn Sie zu viel Punkt zu/oder zu viel Verbindungsentfernung hinzufügen (die Verbindungsentfernung erzeugt zu viele Zeilen), die Animation nicht getragen wird. Wenn sich der Anschluss an Sicht verengt, ist es am besten, die Bewegungsgeschwindigkeit der Partikel zu reduzieren: Je kleiner die Größe der Partikel, und die Bewegungsgeschwindigkeit im schmalen Raum scheint schneller zu sein.
Zeigen Sie den gesamten Code:
<! 0; Canvas); ), // die Farbe der Partikel Linie / Der angeschlossene Draht zwischen den Partikeln Mindestabstand}; ; () {GetSize (GetSize); I <Partikel.Length; LinePoint (Partikel [i], Partikel)} Fenster. Hub [i]); +Zeile [2]+, Opazität+); .CLOSEPATH (); -Point2.y, 2));} function GetSize () {W = canvas.width = Fenster.InnerWidth; X -Achsenkoordinate der Partikel this.y = math.random ()*h; Bewegungsgeschwindigkeit der Partikel ist. .Defaultradrad ius+math. Partikel in der x -Achse y: this.speed* math. Partikel this.border (); Nächster Moment this.y += this.Vector.y; Erreichen sie alle den Rand, wenn (this.x> = w || this.x <= 0) {// Wenn Sie die linken und rechten Grenzen erreichen, lassen .Vector.x *= -1;} if (this.y> = h || this.y <= 0) {// Wenn es die obere und untere Grenzen erreicht, wird die Geschwindigkeit der y -Achse in die ursprüngliche negative Zahl this.Vector.y *= -1; , damit er dies anzeigen kann <0) {this.y = 0;} this.draw = function () {{{// Die Funktion des Zeichnens der Partikel ctx.beginPath (); 0, math.pi * 2);Das oben genannte ist der Inhalt dieses Artikels.