Accentsconagua

Der Firefly-Effekt

Code
Share

Kosmische Bilder werden auf vielen Websites als Hintergrundbild verwendet. Diese Bilder sind zweifellos schön, aber immerhin sind es Standbilder, die wenig Lebhaftigkeit vermitteln. Mit jQuery können wir einem noch kosmischen Bild dreißig Leben verleihen, indem wir Weltraumstaub (Partikel) hinzufügen, die wie Glühwürmchen fliegen. In diesem Tutorial erfahren Sie, wie Sie diesen Effekt in 30 Minuten implementieren können. Wir lernen auch ein wenig objektorientierte Javascript-Techniken.

Eigenschaften

  1. Partikel bewegen sich mit zufälligen Geschwindigkeiten und Richtungen (Brownsche Bewegung).
  2. In diesem Tutorial werden vier Partikelmodelle bereitgestellt. Jeder sieht etwas anders aus.
  3. Die Gesamtanzahl der Partikel ist konfigurierbar.

Wir werden diesen kosmischen Hintergrund ziemlich lange betrachten. Um unsere Augen angenehmer zu gestalten, wird in diesem Tutorial ein dunkles und einfaches Bild als Hintergrund verwendet. Fühlen Sie sich frei, buntere Bilder in Ihren eigenen Projekten zu verwenden.

Die Teilchen

Damit dieser Effekt realistischer wird, haben wir in diesem Tutorial vier Partikelmodelle. Sie sind winzige Bilder mit unterschiedlicher Größe und Aussehen. Sehen Sie sich die Abbildung unten für weitere Details an:

  • Partikel 1 ist kleiner aber heller. Es sieht so aus, als ob es richtig fokussiert ist, damit wir es klar sehen können.
  • Particle 4 ist größer, aber dunkler (so dunkel, dass Sie es kaum sehen können), wodurch ein Objekt unscharf dargestellt wird.

Das HTML

Im Gegensatz zu den meisten Tutorials ist dies der Hintergrund einer Webseite, auf die wir uns heute konzentrieren, was den HTML-Code recht einfach macht:

  • Es gibt keine Elemente in der Karosserie Etikett. Nichts wird uns also vom Hintergrund und der Animation ablenken.
  • Mit der CSS-Definition wird ein kosmischer Hintergrund für den Hauptteil dieser Seite festgelegt. Dies sollte sehr einfach sein.
  • jQuery ist wie üblich enthalten.
    Der Firefly-Effekt

Objektorientiertes JavaScript

Lassen Sie uns nun das Leben eines Partikels näher betrachten. Jedes Partikel kann sich im Aussehen unterscheiden. Und sie bewegen sich mit unterschiedlichen Geschwindigkeiten und Richtungen. Sie folgen jedoch allen denselben Regeln, die als Folge von Aktionen beschrieben werden können:

  1. Wähle zufällig ein Partikelmodell aus.
  2. Erstellen Sie ein DOM für dieses Partikel.
  3. Erzeugen Sie eine zufällige Geschwindigkeit für dieses Teilchen.
  4. Erzeugen Sie die Ausgangsposition (Punkt X und Punkt Y) für dieses Partikel.
  5. Zeigen Sie das Partikel an der in 4 generierten Position an.
  6. Erzeugen Sie eine andere Position (Punkt X und Punkt Y), zu der sich das Partikel bewegt.
  7. Animieren Sie die Partikelbewegung an der in 6 generierten Position.
  8. Wiederholen Sie die Schritte 6 und 7, wenn die unter 7 erwähnte Animation beendet ist.

Jedes Partikel folgt während seiner gesamten Lebensdauer genau diesen acht Schritten. Und die zufälligen Faktoren, wie Position und Geschwindigkeit, machen jedes Partikel einzigartig. Dies ist ein idealer Fall, um einige objektorientierte Programmiertechniken zu implementieren. Lassen Sie uns diese acht Schritte in eine "Klasse" einschließen, die viele Male instanziiert wird, um mehrere Instanzen derselben Logik zu erstellen. Jede Instanz (Partikel) verläuft in einer separaten Spur und behält ihre eigene Geschwindigkeit und Richtung bei.

Beachten Sie, dass in JavaScript keine Klassen vorhanden sind. Funktionen können verwendet werden, um Klassen ein wenig zu simulieren, aber im Allgemeinen ist JavaScript eher prototypbasiert als klassenbasiert. Alles ist ein Objekt. Weitere Informationen zum Definieren und Instanziieren einer JavaScript-Klasse finden Sie in den folgenden Artikeln.

In diesem Effekt wird eine 'Klasse' definiert und 50 Mal mit dem folgenden Code instanziiert.

 function Particle () // 1. Wählen Sie zufällig ein Partikelmodell aus. // 2. Erstellen Sie ein DOM für dieses Partikel. // 3. Generiere eine zufällige Geschwindigkeit für dieses Partikel. // 4. Generiere die Ausgangsposition (Punkt X und Punkt Y) für dieses Partikel. // 5. Anzeige des Partikels an der in 4. generierten Position. // 6. 6. Generiere eine andere Position (Punkt X und Punkt Y), zu der sich das Partikel bewegt. // 7. Animieren Sie die Bewegung der Partikel an die in 6. erzeugte Position. // 8. Wiederholen Sie die Schritte 6 und 7, wenn die unter 7 genannte Animation beendet ist. ; function randomInt (max) // Generiere eine zufällige ganze Zahl (0 <= randomInt < max) return Math.floor(Math.random() * max);  $(function() var total = 50; var particles = []; for (i = 0; i < total; i++) particles[i] = new Particle();  );
  1. Die achtstufige Logik wird in eine Funktion mit dem Namen umschlossen Partikel. Das Definieren einer Funktion ist der Weg, um eine Klasse in Javascript zu definieren.
  2. Für diesen Effekt müssen viele zufällige Ganzzahlen generiert werden, von der Geschwindigkeit bis zur X-Y-Position. Schreiben wir also eine Funktion für diesen alleinigen Zweck und benennen Sie sie randomInt. Es erzeugt eine zufällige ganze Zahl, die kleiner als eine gegebene Zahl ist. Wir werden diese Funktion von Zeit zu Zeit nutzen, also vergessen Sie das nicht.
  3. Am Ende instanziieren wir die Partikel Funktion in einer Schleife, wobei 50 Instanzen von Partikeln erstellt werden, von denen jede in einem Array mit dem Namen gespeichert ist Teilchen. Achten Sie auf die 'Neu'Schlüsselwort, mit dem wir ein Objekt instanziieren.

Einige Grundeinstellungen

In diesem Abschnitt definieren wir Eigenschaften und Methoden für die Partikelklasse. Und wir werden sehen, wie man zufällig ein Partikelmodell auswählt.

Wir können die 'verwendendiese'Schlüsselwort zum Definieren von Eigenschaften für eine' Klasse '. Wenn es um die Definition von Methoden geht,Prototyp'Eigenschaft ist der Weg zu gehen. Schauen Sie sich den Code unten an und wir werden einige Erklärungen geben.

 function Particle () this.path = 'images /'; this.images = ['particle1.png','enteilchen2.png ',' teilchen3.png ',' teilchen4.png ']; // Wähle ein Partikelmodell zufällig this.image = this.images [randomInt (this.images.length)]; this.file = this.path + this.image; // Erzeuge ein Particle DOM this.element = document.createElement ('img'); // Eine Folge von Aktionen, um this.speed (). NewPoint (). Display (). NewPoint (). Fly (); ; // Generiere eine Zufallsgeschwindigkeit Particle.prototype.speed = function () ; // Eine zufällige Position generieren Particle.prototype.newPoint = function () ; // Anzeige des Partikels Particle.prototype.display = function () ; // Partikelbewegungen animieren Particle.prototype.fly = function () ;
  1. In Zeile 2 und 3 definieren wir Pfad und Dateinamen unserer Partikelbilder. Es gibt mehr als ein Partikelbild, also speichern wir sie in einem Array (einer Eigenschaft von Partikel).
  2. In Zeile 6 wird ein zufälliges Partikelbild aus dem oben erwähnten Array ausgewählt. Das randomInt Funktion, die wir zuvor definiert haben, wird hier verwendet. Sehr praktisch, hah?
  3. In Zeile 7 verketten wir den Pfad und den Dateinamen.
  4. In Zeile 10 wird ein img-DOM erstellt. Dies ist der Behälter eines Partikels.
  5. Die Linie 13 ist der Kern dieses Effekts. Eine Folge von Methoden wird in einer Kette aufgerufen. Diese einzige Codezeile behandelt die im vorigen Abschnitt genannten Schritte 3 bis 8. Wir werden jede dieser Methoden sehr bald durcharbeiten.
  6. Von Zeile 17 bis zum Ende sind vier Methoden für die definiert Partikel Klasse. Jeder von ihnen kümmert sich um eine bestimmte Sache für ein Teilchen. Geschwindigkeit() erzeugt die zufällige Geschwindigkeit. NewPoint () erzeugt einen zufälligen Satz von X-Y-Positionen. Anzeige() stellt sicher, dass das Partikel richtig angezeigt wird. Und fliegen() kümmert sich um die Animation.
  7. Beachten Sie, wie wir in Zeile 17, 20, 23 und 26 Methoden für eine 'Klasse' definieren. Neue Methoden werden in der definiert Prototyp Eigentum einer Klasse. Für Leute mit C-, Java- oder PHP-Hintergrund (wie ich) mag das ein bisschen schwierig erscheinen. Wenn Sie sich unwohl dabei fühlen, können Sie den Artikel eine Minute lang lesen.

Tatsächlich gibt es viele verschiedene Möglichkeiten, Eigenschaften und Methoden für eine Javascript-Klasse zu definieren. Hier ist ein großartiger Artikel zu diesem Thema.

Zufällige Geschwindigkeit

Inzwischen haben wir eine Idee, wie dieser Effekt funktioniert. In diesem Abschnitt beginnen wir mit dem Schreiben von Funktionen, mit denen wir die Bewegung eines Partikels manipulieren.

Zuerst erzeugen wir eine zufällige Geschwindigkeit für ein Teilchen. Die Geschwindigkeit bestimmt, wie schnell sich ein Partikel bewegt. Wenn Sie sich mit jQuery auskennen, werden Sie verstehen, dass wir nicht einfach mit echter Geschwindigkeit fahren können, beispielsweise 100 Pixel pro Sekunde. Tatsächlich ist der zur Beschreibung der Geschwindigkeit in jQuery verwendete Parameter die Dauer in Millisekunden. Es stellt sich also die Frage, wie eine vernünftige Dauer erzeugt werden kann, in der ein Partikel von einem Ort zum anderen wandert. Was ist mit dem folgenden Code??

 // Zufallsgeschwindigkeit generieren Particle.prototype.speed = function () this.duration = (randomInt (10) + 5) * 1000; kehre das zurück; ;
  1. In Zeile 3 erzeugen wir einfach eine zufällige ganze Zahl zwischen 5000 und 14000. Das heißt, ein Partikel behält seine Geschwindigkeit und Richtung für 5 bis 14 Sekunden unverändert, bevor es eine Kurve macht und sich in eine andere Richtung bewegt.
  2. Schauen Sie sich Zeile 5 an. Warum tun wir das? Gib das zurück? Denken Sie daran, dass diese Funktionen in einer Kette aufgerufen werden? Durch die Rückgabe des ursprünglichen Objekts wird sichergestellt, dass die Nachlauffunktion ordnungsgemäß funktioniert. Wir werden das auch in anderen Methoden brauchen.
  3. Sobald diese Funktion ausgeführt wird, a Dauer Eigenschaft in begehbarem a Partikel Beispiel.

Zufällige Position

Ein zufälliger Satz von X-Y-Positionen ist für diesen Effekt sehr nützlich. Es kann verwendet werden, um zu bestimmen:

  • An welcher Stelle erscheint zunächst ein Partikel,
  • Bis zu welchem ​​Punkt sich ein Teilchen bewegt, sobald es geboren ist oder eine Reise beendet hat.

Hier ist der Code, den wir benötigen, um einen zufälligen Satz von X-Y-Positionen zu generieren.

 // Eine zufällige Position generieren Particle.prototype.newPoint = function () this.pointX = randomInt (window.innerWidth - 100); this.pointY = randomInt (window.innerHeight - 100); kehre das zurück; ;

Die Größe des aktuellen Browserfensters kann aus abgerufen werden window.innerWidth und window.innerHeight. Wenn ein Partikel über die Begrenzung des Fensters hinausfliegt, werden Bildlaufleisten angezeigt. Wir möchten vielleicht nicht, dass das passiert. Lassen Sie uns also die Partikelbewegung in einem Bereich einschränken, der 100 Pixel weniger hoch und breit als das Browserfenster ist. Der obige Code sollte ziemlich unkompliziert sein. Nachdem diese Funktion ausgeführt wurde, pointX und pointY Eigenschaften werden zugänglich. Einmal läuft die Funktion ein zweites Mal, pointX und pointY wird in der Instanz von erneuert Partikel.

Zeigen Sie den Partikel an

In vorherigen Abschnitten wurde bereits ein img-DOM für ein neues Partikel erstellt. Jetzt werden wir ein paar Attribute setzen und das Partikel irgendwo im Browserfenster anzeigen. Dies wird mit dem folgenden Code erreicht.

 // Anzeige des Partikels Particle.prototype.display = function () $ (this.element) .attr ('src', this.file) .css ('position', 'absolute') .css ('top', this.pointY) .css ('left', this.pointX); $ (document.body) .append (this.element); kehre das zurück; ;
  1. In Zeile 3, this.element enthält das erstellte img DOM. In dieser Funktion setzen wir Attribute dafür.
  2. In Zeile 4, Diese Datei enthält das zufällige Bild, das wir aus den vier Teilchenmodellen ausgewählt haben. Durch die Einstellung der src Attribut bringen wir das Partikelbild in das neue img DOM.
  3. Mit den Zeilen 5 bis 7 wird das Partikel irgendwo im Browserfenster positioniert.
  4. In Zeile 8 wird das soeben erstellte img DOM an den Body angehängt. Das Teilchen wird niemals auftauchen, wenn wir diese Zeile mit einfachem Code nicht schreiben.

Animieren Sie Partikelbewegungen

Schließlich sind wir zu dem Animationsabschnitt gekommen, der möglicherweise einfacher erscheint, als Sie dachten.

Die Animationsfunktion in jQuery erledigt den Trick für uns. Es sind vier Parameter erforderlich: animieren (Params, Dauer, Lockerung, Rückruf). Überprüfen Sie die Dokumentation, wenn Sie keine Ahnung haben, was sie tut.

 // Partikelbewegungen animieren Particle.prototype.fly = function () var self = this; $ (this.element) .animate ("top": this.pointY, "left": this.pointX), this.duration, 'linear', function () self.speed (). newPoint (). fliegen(); ); ;

Was der obige Code macht, ist ganz einfach:

  1. Es animiert das Teilchen zu einer zufälligen Position.
  2. Die Animation dauert diese Millisekunden bis zum Abschluss.
  3. Das Teilchen bewegt sich mit konstanter Geschwindigkeit. (Der Erleichterungsmodus ist 'linear'.)
  4. Sobald die Animation abgeschlossen ist, wird der Code in Zeile 8 als Rückrufe ausgeführt.
  5. In Zeile 8 wird eine neue Geschwindigkeit erzeugt, eine neue Position berechnet und die fliegen() Funktion (die wir gerade in diesem Abschnitt schreiben) wird erneut ausgeführt.
  6. Wiederholen Sie ab Schritt 1.

Also die fliegen() Funktion ruft sich wiederholt auf. Mit dieser rekursiven Funktion wird die Animation für immer fortgesetzt. Inzwischen können wir die gesamte Geschichte eines Partikels schreiben. Erinnere dich noch an die folgende Kette?

 this.speed (). newPoint (). display (). newPoint (). fly ();

Lassen Sie uns überprüfen, was es tut:

  1. Eine neue Geschwindigkeit wird generiert.
  2. Ein neuer Satz von X-Y-Position wird berechnet.
  3. Das Partikel erscheint an der in Schritt 3 berechneten Position.
  4. Eine neue Position wird berechnet.
  5. Das Partikel bewegt sich zu der in Schritt 5 berechneten Position.
  6. Neue Geschwindigkeit wird generiert.
  7. Ein neuer Satz von X-Y-Position wird berechnet.
  8. Das Partikel bewegt sich zu der in Schritt 7 berechneten Position.
  9. Wenn die Animation abgeschlossen ist, wiederholen Sie den Vorgang ab Schritt 6.

Wenn diese Schritte für Sie wie ein Zungenbrecher klingen… Schauen Sie sich diese Figur noch einmal an. Sie sollten jetzt jeden einzelnen Schritt codieren können. Und Sie sollten wissen, wie Sie alles in einer objektorientierten Struktur organisieren. Schließlich ist der Glühwürmcheneffekt abgeschlossen.


Fazit

Nun sollte jeder in der Lage sein, diesen Effekt in Ihren eigenen Projekten umzusetzen. Hoffentlich haben Sie auch ein besseres Verständnis für objektorientiertes Javascript.

Die wichtigste Sache, die ich an diesem Effekt liebe, ist, dass durch Ändern der Hintergrund- und Partikelbilder ein völlig anderes Aussehen und Gefühl erzeugt werden kann. Wenn Sie möchten, können Sie Flugzeuge oder sogar Supermen auf Ihrer Webseite fliegen lassen. Ihre Vorstellungskraft ist die Grenze.

Das ist alles für dieses Tutorial. Ich hoffe es gefällt dir. Danke fürs Lesen!


Code
×