Der Firefly-Effekt | Envato Tuts+

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Kosmische Bilder werden auf vielen Websites als Hintergrundbild verwendet. Diese Bilder sind zweifellos schön, aber es sind immer noch Bilder, die wenig Lebendigkeit bieten. Mit jQuery können wir ein noch kosmisches Bild von 30 Leben erwecken, indem wir etwas Weltraumstaub (Partikel) hinzufügen, der wie Glühwürmchen fliegt. In diesem Tutorial erfahren Sie, wie Sie diesen Effekt in 30 Minuten implementieren. Wir werden auch ein bisschen objektorientierte Javascript-Techniken lernen.

Eigenschaften

Die Partikel bewegen sich mit zufälligen Geschwindigkeiten und Richtungen (Brownsche Bewegung).
In diesem Tutorial werden vier Partikelmodelle bereitgestellt. Jeder hat ein etwas anderes Aussehen.
Die Gesamtzahl der Partikel ist konfigurierbar.

Wir werden diesen kosmischen Hintergrund noch lange betrachten. Um unsere Augen angenehmer zu machen, wird in diesem Tutorial ein dunkles und einfaches Bild als Hintergrund verwendet. Sie können auch farbenfrohere Bilder in Ihren eigenen Projekten verwenden.

Die Teilchen

Um diesen Effekt realistischer erscheinen zu lassen, haben wir in diesem Tutorial vier Partikelmodelle. Es sind winzige Bilder mit unterschiedlicher Größe und unterschiedlichem Aussehen. Schauen Sie sich die Abbildung unten für weitere Details an:

Teilchen 1 ist kleiner aber heller. Es sieht so aus, als ob es richtig fokussiert ist, damit wir es klar sehen können.
Partikel 4 ist größer, aber dunkler (so dunkel, dass Sie es kaum sehen können), was ein unscharfes Objekt nachahmt.

Der HTML

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

Das body-Tag enthält keine Elemente. 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 gewohnt enthalten.

 
	<html> 
		<head> 
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
			<title>The Firefly Effect</title> 
			<style> 
				body { 
					margin: 0; 
					background: #000 url(images/bg.jpg) 60% 0 no-repeat; 
				} 
			</style> 
		</head> 
		<body> 
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
	<script type="text/javascript"> 
	//	The magic goes here... 
	</script> 
 
		</body> 
	</html>

Objektorientiertes JavaScript

Schauen wir uns nun das Leben eines Teilchens genauer an. Jedes Partikel kann unterschiedlich aussehen. Und sie bewegen sich mit unterschiedlichen Geschwindigkeiten und Richtungen. Sie alle folgen jedoch denselben Regeln, die als eine Abfolge von Aktionen beschrieben werden können:

Wählen Sie zufällig ein Partikelmodell aus.
Erstellen Sie ein DOM für dieses Partikel.
Generieren Sie eine zufällige Geschwindigkeit für dieses Partikel.
Generieren Sie die Anfangsposition (Punkt X und Punkt Y) für dieses Partikel.
Zeigen Sie das Partikel an der in 4 erzeugten Position an.
Generieren Sie eine andere Position (Punkt X und Punkt Y), an die sich das Partikel bewegt.
Animieren Sie die Partikelbewegung auf die in 6 erzeugte Position.
Wiederholen Sie 6 und 7, sobald die in 7 erwähnte Animation beendet ist.

Jedes Teilchen folgt während seiner gesamten Lebensdauer genau diesen acht Schritten. Und die zufälligen Faktoren wie Position und Geschwindigkeit sorgen dafür, dass sich jedes Partikel auf einzigartige Weise verhält. Das ist ein perfekter 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) läuft in einer separaten Spur und behält ihre eigene Geschwindigkeit und Richtung.

Es ist wichtig zu beachten, dass es in JavaScript keine Klassen gibt. Funktionen können verwendet werden, um Klassen etwas zu simulieren, aber im Allgemeinen basiert JavaScript eher auf Prototypen als auf Klassen. Alles ist ein Objekt. Weitere Informationen zum Definieren und Instanziieren einer JavaScript-Klasse finden Sie in diesen Artikeln.

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

 
	function Particle() { 
	//	1. Randomly pick a particle model. 
	//	2. Create a DOM for this particle. 
	//	3. Generate a random speed for this particle. 
	//	4. Generate the initial position (Point X and Point Y) for this particle. 
	//	5. Display the particle at the position generated in 4. 
	//	6. Generate another position (Point X and Point Y) to which the particle moves. 
	//	7. Animate the particle movement to the position generated in 6. 
	//	8. Repeat 6 and 7 once the animation mentioned in 7 finishes. 
	}; 
 
	function randomInt(max) { 
	//	Generate a random integer (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(); 
		} 
	});

Die achtstufige Logik ist in eine Funktion namens Partikel eingeschlossen. Durch das Definieren einer Funktion können Sie eine 'Klasse' in Javascript definieren.
Wir müssen in diesem Effekt viele zufällige Ganzzahlen erzeugen, von der Geschwindigkeit bis zu den X-Y-Positionen. Schreiben wir also eine Funktion für diesen einzigen Zweck und nennen sie randomInt. Es wird eine zufällige Ganzzahl generiert, die kleiner als eine bestimmte Zahl ist. Wir werden diese Funktion von Zeit zu Zeit verwenden, vergessen Sie sie also nicht.
Am Ende instanziieren wir die Partikelfunktion in einer Schleife und erstellen 50 Instanzen von Partikeln, von denen jede in einem Array mit dem Namen Partikel gespeichert ist. Achten Sie auf das Schlüsselwort 'new', 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 ein Partikelmodell zufällig auswählt.

Wir können das Schlüsselwort 'this' verwenden, um Eigenschaften für eine 'Klasse' zu definieren. Wenn es darum geht, Methoden zu definieren, ist die Eigenschaft 'prototype' der richtige Weg. Schauen Sie sich den Code unten an und wir werden einige Erklärungen geben.

 
	function Particle() { 
		this.path = 'images/'; 
		this.images = ['particle1.png', 'particle2.png', 'particle3.png', 'particle4.png']; 
 
	//	Randomly Pick a Particle Model 
		this.image = this.images[randomInt(this.images.length)]; 
		this.file = this.path + this.image; 
 
	//	Create a Particle DOM 
		this.element = document.createElement('img'); 
 
	//	A Sequence of Actions to Take 
		this.speed().newPoint().display().newPoint().fly(); 
	}; 
 
	//	Generate a Random Speed 
	Particle.prototype.speed = function() {}; 
 
	//	Generate a Random Position 
	Particle.prototype.newPoint = function() {}; 
 
	//	Display the Particle 
	Particle.prototype.display = function() {}; 
 
	//	Animate Particle Movements 
	Particle.prototype.fly = function() {};

In Zeile 2 und 3 definieren wir den Pfad und die Dateinamen unserer Partikelbilder. Es gibt mehr als ein Partikelbild, daher speichern wir sie in einem Array (eine Eigenschaft von Partikel).
In Zeile 6 wird ein zufälliges Partikelbild aus dem oben erwähnten Array ausgewählt. Hier wird die zuvor definierte randomInt-Funktion verwendet. Sehr praktisch, hah?
In Zeile 7 verketten wir den Pfad und den Dateinamen.
In Zeile 10 wird ein IMG-DOM erstellt. Dies ist der Behälter eines Partikels.
Zeile 13 ist der Kern dieses Effekts. Eine Folge von Methoden wird in einer Kette aufgerufen. Diese einzelne Codezeile deckt die im vorherigen Abschnitt erwähnten Schritte 3 bis 8 ab. Wir werden jede dieser Methoden sehr bald durchgehen.
Von Zeile 17 bis zum Ende sind vier Methoden für die Partikelklasse definiert. Jeder von ihnen kümmert sich um eine bestimmte Sache für ein Teilchen. Speed() erzeugt die zufällige Geschwindigkeit. NewPoint() generiert einen zufälligen Satz von X-Y-Positionen. Display() stellt sicher, dass das Partikel richtig angezeigt wird. Und fly() kümmert sich um die Animation.
Achten Sie darauf, wie wir in Zeile 17, 20, 23 und 26 Methoden für eine 'Klasse' definieren. Neue Methoden werden in der prototype-Eigenschaft einer Klasse definiert. Für Leute mit C-, Java- oder PHP-Hintergrund (wie mich) mag es etwas schwierig erscheinen. Wenn Sie sich damit unwohl fühlen, können Sie diesen 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.

Lassen Sie uns zunächst eine zufällige Geschwindigkeit für ein Partikel erzeugen. Die Geschwindigkeit bestimmt, wie schnell sich ein Partikel bewegt. Wenn Sie mit jQuery vertraut sind, werden Sie verstehen, dass wir nicht einfach mit echter Geschwindigkeit, beispielsweise 100 Pixel pro Sekunde, passieren können. Tatsächlich ist der Parameter, der zur Beschreibung der Geschwindigkeit in jQuery verwendet wird, die in Millisekunden gemessene Dauer. Es stellt sich also die Frage, wie eine angemessene Dauer erzeugt werden kann, in der sich ein Partikel von einem Ort zum anderen bewegt. Was ist mit dem folgenden Code?

 
	//	Generate Random Speed 
	Particle.prototype.speed = function() { 
		this.duration = (randomInt(10) + 5) * 1000; 
 
		return this; 
	};

In Zeile 3 erzeugen wir einfach eine zufällige Ganzzahl zwischen 5000 und 14000. Das heißt, ein Partikel behält seine Geschwindigkeit und Richtung 5 bis 14 Sekunden lang unverändert, bevor es eine Kurve macht und sich auf einen anderen Ort zubewegt.
Schauen Sie sich Zeile 5 an. Warum geben wir das zurück? Denken Sie daran, dass diese Funktionen in einer Kette aufgerufen werden? Durch die Rückgabe des Originalobjekts wird sichergestellt, dass die nachfolgende Funktion ordnungsgemäß funktioniert. Wir werden dies auch bei anderen Methoden benötigen.
Sobald diese Funktion ausgeführt wurde, kann auf eine duration-Eigenschaft in einer Partikelinstanz zugegriffen werden.

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 diesem Punkt taucht zunächst ein Partikel auf,
Zu welchem Punkt bewegt sich ein Teilchen, 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.

 
	//	Generate a Random Position 
	Particle.prototype.newPoint = function() { 
		this.pointX = randomInt(window.innerWidth - 100); 
		this.pointY = randomInt(window.innerHeight - 100); 
 
		return this; 
	};

Die Größe des aktuellen Browserfensters kann aus window.innerWidth und window.innerHeight abgerufen werden. Wenn ein Partikel über die Fenstergrenze hinausfliegt, werden Bildlaufleisten angezeigt. Wir wollen vielleicht nicht, dass das passiert. Beschränken wir also die Partikelbewegung auf einen Bereich, der 100 Pixel weniger hoch und breit als das Browserfenster ist. Der obige Code sollte ziemlich einfach sein. Nachdem diese Funktion ausgeführt wurde, können Sie auf die Eigenschaften pointX und pointY zugreifen. Sobald die Funktion ein zweites Mal ausgeführt wird, werden pointX und pointY im Fall von Particle erneuert.

Zeigen Sie das Partikel an

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

 
	//	Display the Particle 
	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); 
 
		return this; 
	};

In Zeile 3 enthält this.element das erstellte img DOM. Wir werden in dieser Funktion Attribute dafür festlegen.
In Zeile 4 enthält this.file das Zufallsbild, das wir aus den vier Partikelmodellen ausgewählt haben. Durch Setzen des src-Attributs bringen wir das Partikelbild in das neue img DOM.
Bei den Zeilen 5 bis 7 befindet sich das Partikel irgendwo im Browserfenster.
In Zeile 8 wird das gerade erstellte img-DOM an den Körper angehängt. Das Partikel wird niemals angezeigt, wenn wir nicht diese einfache Codezeile schreiben.

Animieren Sie Partikelbewegungen

Schließlich sind wir zum Animationsteil gekommen, der möglicherweise einfacher erscheint als Sie gedacht haben.

Die Animationsfunktion in jQuery erledigt den Trick für uns. Es werden vier Parameter benötigt: animate( params, duration, easing, callback). Überprüfen Sie die Dokumentation, wenn Sie keine Ahnung haben, was sie tut.

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

Was der obige Code tut, ist ganz einfach:

Es animiert das Partikel an einer zufälligen Position.
Die Animation benötigt this.duration Millisekunden.
Das Teilchen bewegt sich mit konstanter Geschwindigkeit. (Der Lockerungsmodus ist 'linear'.)
Sobald die Animation abgeschlossen ist, wird der Code in Zeile 8 als Rückruf ausgeführt.
In Zeile 8 wird eine neue Geschwindigkeit generiert, eine neue Position berechnet und die Funktion fly() (genau die, die wir in diesem Abschnitt schreiben) wird erneut ausgeführt.
Wiederholen Sie ab Schritt 1.

Die Funktion fly() ruft sich also wiederholt auf. Mit dieser rekursiven Funktion geht die Animation für immer weiter. Inzwischen können wir die ganze Geschichte des Lebens eines Teilchens schreiben. Erinnerst du dich noch an die folgende Kette?

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

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

Eine neue Geschwindigkeit wird erzeugt.
Ein neuer Satz von X-Y-Positionen wird berechnet.
Das Partikel erscheint an der in Schritt 3 berechneten Position.
Eine neue Position wird berechnet.
Das Partikel bewegt sich zu der in Schritt 5 berechneten Position.
Neue Geschwindigkeit wird erzeugt.
Ein neuer Satz von X-Y-Positionen wird berechnet.
Das Partikel bewegt sich zu der in Schritt 7 berechneten Position.
Wenn die Animation abgeschlossen ist, wiederholen Sie Schritt 6.

Wenn diese Schritte für Sie wie ein Zungenbrecher klingen... Schauen Sie sich diese Figur noch einmal an. Sie sollten jetzt in der Lage sein, jeden einzelnen Schritt zu codieren. Und Sie sollten wissen, wie man alles in einer objektorientierten Struktur organisiert. Endlich ist der Glühwürmcheneffekt abgeschlossen.

Abschluss

Jetzt 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.

Das Wichtigste an diesem Effekt ist, dass Sie durch Ändern der Hintergrund- und Partikelbilder ein völlig anderes Erscheinungsbild erzielen können. Wenn Sie möchten, können Sie Flugzeuge oder sogar Supermenschen auf Ihrer Webseite fliegen lassen. Ihrer Fantasie sind keine Grenzen gesetzt.

Das ist alles für dieses Tutorial. Hoffe es gefällt euch. Danke fürs Lesen!