Het vuurvliegeffect

Kosmische afbeeldingen worden op veel websites gebruikt als achtergrondafbeelding. Die foto's zijn ongetwijfeld mooi, maar het zijn tenslotte toch beelden die weinig levendigheid geven. Met jQuery kunnen we een nog steeds kosmisch beeld van dertig leven brengen door wat ruimtestof (deeltjes) toe te voegen dat vliegt als vuurvliegjes. In deze zelfstudie zullen we zien hoe we dit effect in 30 minuten kunnen implementeren. We zullen ook een beetje objectgerichte Javascript-technieken leren.

Kenmerken

Deeltjes bewegen met willekeurige snelheden en richtingen (Brownse beweging).
In deze zelfstudie zijn vier modellen met deeltjes te vinden. Elk heeft iets andere looks.
Het totale aantal deeltjes is configureerbaar.

We zullen voor een lange tijd naar deze kosmische achtergrond staren. Om onze ogen comfortabeler te maken, wordt een donkere en eenvoudige afbeelding gebruikt als achtergrond in deze zelfstudie. Voel je vrij om meer kleurrijke afbeeldingen te gebruiken in je eigen projecten.

De deeltjes

Om dit effect er realistischer uit te laten zien, hebben we vier modellen met deeltjes in deze zelfstudie. Het zijn kleine afbeeldingen met verschillende afmetingen en uiterlijk. Kijk naar de figuur hieronder voor meer details:

Deeltje 1 is kleiner maar helderder. Het lijkt erop dat het goed in beeld is, zodat we het duidelijk kunnen zien.
Deeltje 4 is groter maar donkerder (zo donker dat je het amper kunt zien), wat een voorwerp onscherp weergeeft.

De HTML

In tegenstelling tot de meeste tutorials, is het de achtergrond van een webpagina waarop we ons vandaag zullen concentreren, waardoor de HTML vrij eenvoudig is:

Er zijn geen elementen binnen de lichaam label. Niets zal ons dus afleiden van de achtergrond en de animatie.
Met de CSS-definitie wordt een kosmische achtergrond ingesteld voor de hoofdtekst van deze pagina. Dit zou heel eenvoudig moeten zijn.
jQuery is zoals gebruikelijk inbegrepen.

    Het vuurvliegeffect

Object-georiënteerd JavaScript

Laten we nu het leven van een deeltje eens nader bekijken. Elk deeltje kan er anders uitzien. En ze bewegen met verschillende snelheden en richtingen. Maar ze volgen allemaal dezelfde regels die kunnen worden omschreven als een reeks acties:

Kies willekeurig een deeltjesmodel.
Maak een DOM voor dit deeltje.
Genereer een willekeurige snelheid voor dit deeltje.
Genereer de beginpositie (punt X en punt Y) voor dit deeltje.
Geef het deeltje weer op de positie die is gegenereerd in 4.
Genereer een andere positie (punt X en punt Y) waarnaar het deeltje beweegt.
Animeer de deeltjesbeweging naar de positie gegenereerd in 6.
Herhaal 6 en 7 als de animatie in 7 afwerkingen wordt vermeld.

Elk deeltje volgt precies deze acht stappen gedurende zijn levensduur. En de willekeurige factoren, zoals positie en snelheid, zorgen ervoor dat elk deeltje zich op een unieke manier gedraagt. Dit is een perfect geval om een aantal objectgeoriënteerde programmeertechnieken te implementeren. Laten we deze acht stappen omwikkelen in een 'klasse' die vele keren zal worden geïnstantieerd om meerdere exemplaren van dezelfde logica te maken. Elke instantie (deeltje) wordt op een afzonderlijke baan uitgevoerd en behoudt zijn eigen snelheid en richting.

Het is belangrijk om op te merken dat er geen JavaScript-klassen zijn. Functies kunnen worden gebruikt om klassen enigszins te simuleren, maar in het algemeen is JavaScript gebaseerd op prototypen in plaats van op klassen. Alles is een object. Raadpleeg deze artikelen voor meer informatie over het definiëren en instantiëren van een JavaScript-'klasse '.

In ditzelfde effect wordt een 'klasse' gedefinieerd en vervolgens 50 keer geïnstantieerd met de volgende code.

 function Particle () // 1. Kies willekeurig een deeltjesmodel. // 2. Maak een DOM voor dit deeltje. // 3. Genereer een willekeurige snelheid voor dit deeltje. // 4. Genereer de beginpositie (punt X en punt Y) voor dit deeltje. // 5. Geef het deeltje weer op de positie die is gegenereerd in 4. // 6. Genereer een andere positie (Punt X en Punt Y) waarnaar het deeltje zich verplaatst. // 7. Animeer de deeltjesbeweging naar de positie die is gegenereerd in 6. // 8. Herhaal 6 en 7 zodra de animatie die in 7 afwerkingen wordt genoemd. ; function randomInt (max) // Genereer een willekeurig geheel getal (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();  );

De logica met acht stappen is verpakt in een functie met de naam Deeltje. Het definiëren van een functie is de manier om een 'klasse' in Javascript te definiëren.
In dit effect moeten we veel willekeurige gehele getallen genereren, van snelheden tot X-Y-posities. Dus laten we een functie voor dit enige doel schrijven en het een naam geven randomInt. Het genereert een willekeurig geheel getal dat kleiner is dan een bepaald getal. We zullen deze functie van tijd tot tijd gebruiken, dus vergeet dit niet.
Aan het einde, we instantiëren de Deeltje functie in een lus, waardoor 50 instanties van deeltjes worden gecreëerd, die elk in een array met de naam worden opgeslagen deeltjes. Let op de 'nieuwe'sleutelwoord dat we gebruiken om een object te instantiëren.

Enkele basisinstellingen

In deze sectie zullen we eigenschappen en methoden definiëren voor de klasse Deeltjes. En we zullen zien hoe willekeurig een deeltjesmodel te kiezen.

We kunnen de 'deze'sleutelwoord om eigenschappen voor een' klasse 'te definiëren. Als het gaat om het definiëren van methoden,prototype'eigendom is de manier om te gaan. Kijk naar de onderstaande code en we zullen wat uitleg geven.

 function Particle () this.path = 'images /'; this.images = ['particle1.png', 'particle2.png', 'particle3.png', 'particle4.png']; // Kies willekeurig een deeltjesmodel this.image = this.images [randomInt (this.images.length)]; this.file = this.path + this.image; // Maak een Particle DOM this.element = document.createElement ('img'); // Een reeks acties om This.speed (). NewPoint (). Display (). NewPoint (). Fly (); ; // Genereer een willekeurige snelheid Particle.prototype.speed = function () ; // Genereer een willekeurige positie Particle.prototype.newPoint = function () ; // Geef de Particle Particle.prototype.display = function () ; // Beweeg deeltjesbewegingen Particle.prototype.fly = function () ;

In regel 2 en 3 definiëren we het pad en de bestandsnamen van onze partikelafbeeldingen. Er zijn meerdere deeltjesafbeeldingen, dus we slaan ze op in een array (een eigenschap van Deeltje).
In regel 6 wordt een willekeurig deeltjesbeeld uit de hierboven genoemde reeks genomen. De randomInt functie die we eerder hebben gedefinieerd, wordt hier gebruikt. Heel handig, hah?
In regel 7 brengen we het pad en de bestandsnaam samen.
In regel 10 wordt een img-DOM gemaakt. Dit is de container van een deeltje.
Lijn 13 is de kern van dit effect. Een reeks methoden wordt in een keten genoemd. Deze enkele coderegel dekt de stappen 3 t / m 8 die in de vorige sectie werden genoemd. We zullen al deze methoden snel doornemen.
Van regel 17 helemaal tot het einde, zijn vier methoden gedefinieerd voor de Deeltje klasse. Elk van hen zorgt voor een bepaald ding voor een deeltje. Snelheid() genereert de willekeurige snelheid. Newpoint () genereert een willekeurige reeks X-Y-posities. Display () zorgt ervoor dat het deeltje correct wordt weergegeven. En vlieg() zorgt voor de animatie.
Besteed aandacht aan de manier waarop we methoden voor een 'klasse' definiëren in regel 17, 20, 23 en 26. Nieuwe methoden worden gedefinieerd in de prototype eigendom van een klasse. Het lijkt misschien een beetje lastig voor jongens van een C-, Java- of PHP-achtergrond (zoals ik). Als je je hier ongemakkelijk bij voelt, kun je dit artikel gerust een minuutje lezen.

In feite zijn er veel verschillende manieren om eigenschappen en methoden voor een Javascript-klasse te definiëren. Hier is een geweldig artikel over dit onderwerp.

Willekeurige snelheid

Inmiddels hebben we een idee hoe dit effect werkt. In dit gedeelte beginnen we functies te schrijven die we gebruiken om de beweging van een deeltje te manipuleren.

Laten we eerst een willekeurige snelheid voor een deeltje genereren. De snelheid bepaalt hoe snel een deeltje reist. Als u bekend bent met jQuery, begrijpt u dat we niet zomaar in real-time kunnen gaan, zeg 100 pixels per seconde. In feite is de parameter die wordt gebruikt om de snelheid in jQuery te beschrijven de duur gemeten in milliseconden. Dus de vraag wordt hoe je een redelijke duur kunt genereren waarin een deeltje van de ene plaats naar de andere reist. Hoe zit het met de volgende code?

 // Genereer willekeurige snelheid Particle.prototype.speed = function () this.duration = (randomInt (10) + 5) * 1000; geef dit terug; ;

In regel 3 genereren we eenvoudig een willekeurig geheel getal tussen 5000 en 14000. Dat wil zeggen dat een deeltje zijn snelheid en richting onveranderd blijft gedurende 5 - 14 seconden voordat hij een afslag neemt en naar ergens anders toe beweegt.
Kijk naar regel 5. Waarom doen we stuur dit terug? Onthoud dat deze functies in een keten worden genoemd? Het retourneren van het originele object zorgt ervoor dat de naloopfunctie correct werkt. We zullen dit ook op andere manieren nodig hebben.
Zodra deze functie is uitgevoerd, looptijd eigendom in toegankelijk in a Deeltje aanleg.

Willekeurige positie

Een willekeurige verzameling X-Y-posities is erg handig in dit effect. Het kan worden gebruikt om te bepalen:

Op dat moment verschijnt er eerst een deeltje,
Op welk punt een deeltje beweegt zodra het is geboren of een reis voltooit.

Dit is de code die we nodig hebben om een willekeurige reeks X-Y-posities te genereren.

 // Genereer een willekeurige positie Particle.prototype.newPoint = function () this.pointX = randomInt (window.innerWidth - 100); this.pointY = randomInt (window.innerHeight - 100); geef dit terug; ;

De grootte van het huidige browservenster kan worden opgehaald window.innerWidth en window.innerHeight. Als een deeltje voorbij de grens van het venster vliegt, verschijnen er schuifbalken. We willen misschien niet dat dit gebeurt. Dus laten we de beweging van de deeltjes beperken in een gebied dat 100 pixels minder hoog en breed is dan het browservenster. De bovenstaande code zou vrij eenvoudig moeten zijn. Nadat deze functie is uitgevoerd, pointX en puntig eigenschappen worden toegankelijk. Zodra de functie een tweede keer wordt uitgevoerd, pointX en puntig zal worden vernieuwd in het geval van Deeltje.

Toon de deeltjes

In voorgaande secties was al een img DOM gemaakt voor een nieuw deeltje. Nu gaan we enkele attributen instellen en het deeltje ergens in het browservenster weergeven. Dit wordt bereikt met de volgende code.

 // Geef de 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); geef dit terug; ;

In regel 3, this.element bevat de gemaakte img DOM. We zullen attributen ervoor instellen in deze functie.
In regel 4, dit bestand bevat de willekeurige afbeelding die we hebben gekozen uit de vier deeltjesmodellen. Door de src attribuut, we brengen het deeltje naar de nieuwe img DOM.
Met regel 5 tot 7 bevindt het deeltje zich ergens in het browservenster.
In regel 8 wordt de img-DOM die zojuist is gemaakt, aan het lichaam toegevoegd. Het deeltje zal nooit verschijnen tenzij we deze lijn van eenvoudige code schrijven.

Beweeg deeltjesbewegingen

Eindelijk, we zijn naar het animatiedeel gekomen dat misschien eenvoudiger lijkt dan je dacht.

De animatiefunctie in jQuery zal ons helpen. Er zijn vier parameters nodig: animeren (params, duur, versnelling, callback). Raadpleeg de documentatie als u geen idee heeft wat het doet.

 // Beweeg deeltjesbeweging Particle.prototype.fly = function () var self = this; $ (this.element) .animation ("top": this.pointY, "left": this.pointX,, this.duration, 'linear', function () self.speed (). newPoint (). fly ();); ;

Wat de bovenstaande code doet is vrij eenvoudig:

Het geeft het deeltje een willekeurige positie.
De animatie duurt this.duration milliseconden in te vullen.
Het deeltje beweegt met constante snelheid. (Verlichtingsmodus is 'lineair'.)
Nadat de animatie is voltooid, wordt de code in regel 8 uitgevoerd als callbacks.
In regel 8 wordt een nieuwe snelheid gegenereerd, een nieuwe positie berekend en de vlieg() functie (de enige die we in dit gedeelte schrijven) zal opnieuw worden uitgevoerd.
Herhaal vanaf stap 1.

Dus de vlieg() functie roept zichzelf herhaaldelijk op. Met deze recursieve functie gaat de animatie voor altijd door. Inmiddels kunnen we het hele verhaal van het leven van een deeltje schrijven. Onthoud de volgende ketting nog?

 . This.speed () Newpoint () display () Newpoint () fly ()...;

Laten we eens kijken wat het doet:

Er wordt een nieuwe snelheid gegenereerd.
Een nieuwe set X-Y-posities wordt berekend.
Het deeltje verschijnt op de positie berekend in stap 3.
Een nieuwe positie wordt berekend.
Het deeltje beweegt naar de positie berekend in stap 5.
Nieuwe snelheid wordt gegenereerd.
Een nieuwe set X-Y-posities wordt berekend.
Het deeltje beweegt naar de positie berekend in stap 7.
Zodra de animatie is voltooid, herhaalt u de procedure vanaf stap 6.

Als deze stappen klinken als een tongverdraaiing naar je ... Kijk eens naar deze figuur. Je zou nu elke stap moeten kunnen coderen. En je moet weten hoe je alle dingen in een objectgerichte structuur moet organiseren. Eindelijk is het vuurvliegeffect voltooid.

Conclusie

Nu moet iedereen dit effect in uw eigen projecten kunnen implementeren. Hopelijk heb je ook een beter begrip van objectgeoriënteerde Javascript.

Het belangrijkste ding dat ik leuk vind aan dit effect, is dat je door het veranderen van achtergrond en partikelafbeeldingen, compleet verschillende looks en feel kunt produceren. Je kunt vliegtuigen of zelfs supermensen op je webpagina laten vliegen als je dat wilt. Je verbeelding is de limiet.

Dat is alles voor deze tutorial. Hoop dat je het leuk vind. Bedankt voor het lezen!

Code