Accentsconagua

Firefly-effekten

Koda
Share

Kosmiska bilder används på många webbplatser som bakgrundsbild. Dessa bilder är utan tvekan vackra, men trots allt är de fortfarande bilder som ger liten livlighet. Med jQuery kan vi ta fram en still kosmisk bild trettio liv genom att lägga till lite rymdstoft (partiklar) som flyger som eldflugor. I denna handledning ser vi hur du implementerar denna effekt på 30 minuter. Vi lär oss också en del objektorienterade Javascript-tekniker.

Funktioner

  1. Partiklar rör sig i slumpmässiga hastigheter och riktningar (Brownian Motion).
  2. Fyra partikelmodeller finns i denna handledning. Var och en har något annorlunda utseende.
  3. Det totala antalet partiklar kan konfigureras.

Vi kommer att titta på denna kosmiska bakgrund under ganska lång tid. För att göra våra ögon bekvämare, används en mörk och enkel bild som bakgrund i denna handledning. Känn dig fri att använda mer färgstarka bilder i dina egna projekt.

Partiklarna

För att göra denna effekt ser mer realistisk ut, har vi fyra modeller av partiklar i denna handledning. De är små bilder med olika storlek och utseende. Titta på bilden nedan för mer information:

  • Partikel 1 är mindre men ljusare. Det ser ut som om det ligger rätt i fokus så att vi kan se det tydligt.
  • Partikel 4 är större men mörkare (så mörk att du knappt kan se den), som efterliknar ett objekt ur fokus.

HTML

Till skillnad från de flesta handledningar är det bakgrunden till en webbsida som vi fokuserar idag, vilket gör HTML ganska enkelt:

  • Det finns inga element inom kropp märka. Så ingenting kommer att distrahera oss från bakgrunden och animationen.
  • Med CSS-definitionen är en kosmisk bakgrund inställd för kroppen på den här sidan. Detta borde vara väldigt enkelt.
  • jQuery ingår som vanligt.
    Firefly-effekten

Objektorienterad JavaScript

Låt oss nu titta närmare på partikelns liv. Varje partikel kan skilja sig i utseende. Och de rör sig i olika hastigheter och riktningar. Men de följer alla samma regler som kan beskrivas som en följd av handlingar:

  1. Slumpmässigt välja en partikelmodell.
  2. Skapa en DOM för denna partikel.
  3. Generera en slumpmässig hastighet för denna partikel.
  4. Generera startpositionen (Punkt X och Punkt Y) för denna partikel.
  5. Visa partikeln vid den position som genereras i 4.
  6. Generera en annan position (Punkt X och Punkt Y) till vilken partikeln rör sig.
  7. Animera partikelrörelsen till den position som genereras i 6.
  8. Upprepa 6 och 7 när animationen som nämns i 7 slutar.

Varje partikel följer exakt dessa åtta steg under hela sin livstid. Och de slumpmässiga faktorerna, såsom position och hastighet, gör varje partikel uppför sig på ett unikt sätt. Detta är ett perfekt fall för att genomföra några objektorienterade programmeringstekniker. Låt oss sätta ihop dessa åtta steg i en "klass" som kommer att instantieras många gånger för att skapa flera instanser av samma logik. Varje förekomst (partikel) går i en separat lane och har sin egen hastighet och riktning.

Det är viktigt att notera att det inte finns några klasser i JavaScript. Funktioner kan användas för att något simulerar klasser, men i allmänhet är JavaScript prototypbaserat snarare än klassbaserat. Allt är ett föremål. För mer information om hur du definierar och instämmer i en JavaScript-klass, var god och kolla dessa artiklar.

I den här effekten definieras en "klass" och ställs sedan 50 gånger med följande kod.

 funktion Partikel () // 1. Välj en partikelmodell slumpmässigt. // 2. Skapa en DOM för denna partikel. // 3. Generera en slumpmässig hastighet för denna partikel. // 4. Generera startpositionen (Punkt X och Punkt Y) för denna partikel. // 5. Visa partikeln vid den position som genereras i 4. // 6. Generera en annan position (Punkt X och Punkt Y) till vilken partikeln rör sig. // 7. Animera partikelrörelsen till den position som genereras i 6. // 8. Repetera 6 och 7 när animationen som nämns i 7 slutar. ; funktion randomInt (max) // Generera ett slumpmässigt heltal (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. Den åtta stegs logiken är insvept i en funktion som heter Partikel. Definiera en funktion är sättet att definiera en "klass" i Javascript.
  2. Vi måste generera många slumpmässiga heltal i denna effekt, från hastighet till X-Y-positioner. Så låt oss skriva en funktion för detta enda ändamål och namnge det randomInt. Det genererar ett slumpmässigt heltal mindre än ett givet tal. Vi använder den här funktionen från tid till annan, så glöm det inte.
  3. I slutet slår vi om Partikel funktion i en slinga, skapa 50 instanser av partiklar, vilka var och en lagras i en angiven array partiklar. Var uppmärksam på "ny'nyckelord som vi använder för att instansera ett objekt.

Vissa grundläggande inställningar

I det här avsnittet definierar vi egenskaper och metoder för partikelklassen. Och vi får se hur man slumpmässigt väljer en partikelmodell.

Vi kan använda "detta"nyckelord för att definiera egenskaper för en" klass ". När det gäller att definiera metoder,prototyp"egendom är vägen att gå. Titta på koden nedan och vi ger några förklaringar.

 funktion Partikel () this.path = 'images /'; this.images = ['particle1.png', 'particle2.png', 'particle3.png', 'particle4.png']; // Slumpmässigt Välj en partikelmodell this.image = this.images [randomInt (this.images.length)]; this.file = this.path + this.image; // Skapa en partikel DOM this.element = document.createElement ('img'); // En sekvens av åtgärder för att ta this.speed (). NewPoint (). Display (). NewPoint (). Fly (); ; // Skapa en slumpmässig hastighet Particle.prototype.speed = funktion () ; // Skapa en slumpmässig position Particle.prototype.newPoint = function () ; // Visa partikelpartikeln.prototype.display = funktion () ; // Animera partikelrörelser Particle.prototype.fly = function () ;
  1. I Linje 2 och 3 definierar vi sökvägen och filnamnen på våra partikelbilder. Det finns mer än en partikelbilder så vi lagrar dem i en array (en egenskap av Partikel).
  2. I rad 6 plockas en slumpmässig partikelbild från den ovan nämnda raden. De randomInt Funktionen som vi definierade tidigare används här. Mycket praktiskt, hah?
  3. I rad 7 sammanfogar vi sökvägen och filnamnet.
  4. I rad 10 skapas en img DOM. Detta är behållaren av en partikel.
  5. Linje 13 är kärnan i denna effekt. En sekvens av metoder kallas i en kedja. Denna enda kodlinje omfattar steg 3 till 8 som nämns i föregående avsnitt. Vi kommer snart igenom alla dessa metoder.
  6. Från linje 17 ända fram till slutet definieras fyra metoder för Partikel klass. Var och en av dem tar hand om en viss sak för en partikel. Fart() genererar slumphastigheten. Newpoint () genererar en slumpmässig uppsättning X-Y-position. Visa() Se till att partikeln visas korrekt. Och flyga() tar hand om animationen.
  7. Var uppmärksam på hur vi definierar metoder för en "klass" i rad 17, 20, 23 och 26. Nya metoder definieras i prototyp egenskap av en klass. Det kan tyckas lite knepigt för killar från en C, Java eller PHP-bakgrund (som jag). Om du känner dig obekväm med det här är du välkommen att tillbringa en minut att läsa den här artikeln.

Faktum är att det finns många olika sätt att definiera egenskaper och metoder för en Javascript-klass. Här är en bra artikel om detta ämne.

Slumpmässig hastighet

Nu har vi en uppfattning om hur denna effekt fungerar. Från det här avsnittet börjar vi skriva funktioner som vi använder för att manipulera rörelsen hos en partikel.

Låt oss först skapa en slumpmässig hastighet för en partikel. Hastigheten bestämmer hur snabbt en partikel färdas. Om du är bekant med jQuery förstår du att vi inte bara kan skicka i realtid, säg 100 pixlar per sekund. Faktum är att parametern som används för att beskriva hastigheten i jQuery är varaktighet mätt i millisekunder. Så blir frågan hur man genererar en rimlig varaktighet där en partikel reser från en plats till en annan. Vad sägs om följande kod?

 // Generera slumpmässig hastighet Particle.prototype.speed = function () this.duration = (randomInt (10) + 5) * 1000; returnera detta; ;
  1. I rad 3 genererar vi helt enkelt ett slumptalstal mellan 5000 och 14000. Det vill säga en partikel håller sin hastighet och riktning oförändrad i 5 - 14 sekunder innan vi tar en tur och går vidare till någon annanstans.
  2. Titta på linje 5. Varför gör vi returnera detta? Kom ihåg att dessa funktioner kommer att ringas i en kedja? Att återgå till originalobjektet säkerställer att efterföljande funktion fungerar korrekt. Vi behöver detta på andra sätt också.
  3. När den här funktionen exekveras, a varaktighet egendom tillgänglig i a Partikel exempel.

Slumpmässig position

En slumpmässig uppsättning av X-Y-positionen är mycket användbar i denna effekt. Det kan användas för att bestämma:

  • Vid vilken tidpunkt visas en partikel i början,
  • Till vilken punkt en partikel rör sig när den är född eller avslutar en resa.

Här är koden vi behöver för att generera en slumpmässig uppsättning X-Y-position.

 // Skapa en slumpmässig position Particle.prototype.newPoint = function () this.pointX = randomInt (window.innerWidth - 100); this.pointY = randomInt (window.innerHeight - 100); returnera detta; ;

Storleken på det aktuella webbläsarfönstret kan hämtas från window.innerWidth och window.innerHeight. Om en partikel flyger bortom gränsen för fönstret kommer rullningsfält att dyka upp. Vi kanske inte vill att det ska hända. Så låt oss begränsa partikelrörelsen i ett område som är 100 pixlar mindre högt och bredt än webbläsarfönstret. Ovanstående kod ska vara ganska enkel. Efter den här funktionen exekveras, pointX och spetsig egenskaper blir tillgängliga. När funktionen körs en andra gång, pointX och spetsig kommer att förnyas i förevarande fall av Partikel.

Visa partikeln

I tidigare avsnitt skapades en img DOM redan för en ny partikel. Nu ska vi ange några attribut och visa partikeln någonstans i webbläsarfönstret. Detta uppnås med följande kod.

 // Visa partikelpartikel.prototype.display = funktion () $ (this.element) .attr ('src', this.file) .css ('position', 'absolute') .css ('top' this.pointY) .css ("left", this.pointX); $ (Document.body) .append (this.element); returnera detta; ;
  1. I rad 3, this.element innehåller den skapade img DOM. Vi ställer in attribut för det i den här funktionen.
  2. I rad 4, den här filen innehåller den slumpmässiga bilden vi valde från de fyra partikelmodellerna. Genom att ställa in src attribut, vi tar partikelbilden till den nya img DOM.
  3. Med linje 5 till 7 placeras partikeln någonstans i webbläsarfönstret.
  4. I linje 8 är den img DOM som just har skapats bifogats kroppen. Partikeln kommer aldrig dyka upp om vi inte skriver denna linje med enkel kod.

Animera partikelrörelser

Slutligen har vi kommit till animationsdelen som kan bli enklare än du trodde.

Den animerade funktionen i jQuery gör tricket för oss. Det tar fyra parametrar: animera (parametrar, varaktighet, lättnad, återuppringning). Kolla in dokumentationen om du inte har någon aning om vad den gör.

 // Animera partikelrörelser Particle.prototype.fly = function () var själv = this; $ (this.element) .animate ("top": this.pointY, "left": this.pointX,, this.duration, "linear", funktionen () self.speed (). newPoint (). flyga ();); ;

Vad ovanstående kod gör är ganska enkelt:

  1. Det animerar partikeln till en slumpmässig position.
  2. Animationen tar this.duration millisekunder att slutföra.
  3. Partikeln rör sig med konstant hastighet. (Lättläget är "linjärt".)
  4. När animationen är klar kommer koden i rad 8 att utföras som återuppringningar.
  5. I linje 8 kommer en ny hastighet att genereras, en ny position kommer att beräknas och flyga() funktionen (den enda vi skriver i det här avsnittet) kommer att utföras igen.
  6. Upprepa från steg 1.

Så flyga() funktionen kallas upprepade gånger. Med denna rekursiva funktion går animationen på och av för alltid. Vid det här laget kan vi skriva hela historien om en partikelns liv. Kom ihåg fortfarande följande kedja?

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

Låt oss se vad det gör:

  1. En ny hastighet genereras.
  2. En ny uppsättning X-Y-position beräknas.
  3. Partikeln uppträder vid den position som beräknas i steg 3.
  4. En ny position beräknas.
  5. Partikeln rör sig till läget beräknat i steg 5.
  6. Ny hastighet genereras.
  7. En ny uppsättning X-Y-position beräknas.
  8. Partikeln flyttas till positionen beräknad i steg 7.
  9. När animationen är klar, upprepa från steg 6.

Om dessa steg låter som en tunga twister till dig ... Tja, titta på den här siffran igen. Du borde kunna koda varje steg nu. Och du borde veta hur man organiserar alla saker i en objektorienterad struktur. Slutligen är firefly-effekten klar.


Slutsats

Nu borde alla kunna genomföra denna effekt i dina egna projekt. Förhoppningsvis har du också en bättre förståelse av objektorienterad Javascript.

Den första sak jag älskar om denna effekt är att genom att ändra bakgrunds- och partikelbilderna, kan du producera helt annorlunda utseende. Du kan ha flygplan eller till och med supermän som flyger på din webbsida om du vill. Din fantasi är gränsen.

Det är allt för denna handledning. Hoppas du gillar det. Tack för att du läser!


Koda
×