Accentsconagua

Firefly-effekten

Kode
Share

Kosmiske bilder brukes på mange nettsteder som bakgrunnsbilde. Disse bildene er utvilsomt vakre, men tross alt er de fortsatt bilder som gir liten livlighet. Med jQuery kan vi bringe et fortsatt kosmisk bilde tretti liv ved å legge til noe romstøv (partikler) som flyr som ildfluer. I denne veiledningen ser vi hvordan du implementerer denne effekten på 30 minutter. Vi lærer også en del objektorienterte Javascript-teknikker.

Egenskaper

  1. Partikler beveger seg i tilfeldige hastigheter og retninger (Brownian Motion).
  2. Fire modeller av partikler er gitt i denne opplæringen. Hver har litt annerledes utseende.
  3. Det totale antall partikler er konfigurerbart.

Vi vil se på denne kosmiske bakgrunnen i ganske lang tid. For å gjøre øynene våre mer komfortable, brukes et mørkt og enkelt bilde som bakgrunn i denne opplæringen. Du er velkommen til å bruke mer fargerike bilder i dine egne prosjekter.

Partiklene

For å få denne effekten til å se mer realistisk, har vi fire modeller av partikler i denne opplæringen. De er små bilder med forskjellig størrelse og utseende. Se på figuren under for mer informasjon:

  • Partikkel 1 er mindre, men lysere. Det ser ut som om det er riktig i fokus slik at vi kan se det tydelig.
  • Partikkel 4 er større, men mørkere (så mørkt at du knapt kan se den), som etterligner en gjenstand uten fokus.

HTML-koden

I motsetning til de fleste opplæringsprogrammer, er det bakgrunnen til en nettside som vi skal fokusere i dag, noe som gjør HTML ganske enkelt:

  • Det finnes ingen elementer innenfor kropp stikkord. Så ingenting vil distrahere oss fra bakgrunnen og animasjonen.
  • Med CSS-definisjonen er det satt en kosmisk bakgrunn for kroppen på denne siden. Dette burde være veldig grei.
  • jQuery er inkludert som vanlig.
    Firefly-effekten

Objektorientert JavaScript

La oss nå se nærmere på partikkelens liv. Hver partikkel kan variere i utseende. Og de beveger seg i forskjellige hastigheter og retninger. Men de følger alle de samme reglene som kan beskrives som en rekke handlinger:

  1. Velg tilfeldig en partikkelmodell.
  2. Opprett en DOM for denne partikkelen.
  3. Generer en tilfeldig hastighet for denne partikkelen.
  4. Generer startposisjonen (punkt X og punkt Y) for denne partikkelen.
  5. Vis partikkelen på stillingen generert i 4.
  6. Generer en annen posisjon (punkt X og punkt Y) som partikkelen beveger seg på.
  7. Animer partikkelbevegelsen til posisjonen generert i 6.
  8. Gjenta 6 og 7 når animasjonen nevnt i 7 er ferdig.

Hver partikkel følger nøyaktig disse åtte trinnene gjennom hele levetiden. Og tilfeldige faktorer, for eksempel posisjon og hastighet, gjør hver partikkel oppfører seg på en unik måte. Dette er et perfekt tilfelle for å implementere noen objektorienterte programmeringsteknikker. La oss pakke disse åtte trinnene i en "klasse" som vil bli instantiated mange ganger for å opprette flere forekomster av samme logikk. Hver forekomst (partikkel) går i en separat kjørefelt og har sin egen hastighet og retning.

Det er viktig å merke seg at det ikke er noen klasser i JavaScript. Funksjoner kan brukes til å noe simulere klasser, men generelt er JavaScript prototypebasert i stedet for klassebasert. Alt er et objekt. For mer informasjon om hvordan du definerer og instanser en JavaScript-klasse, vennligst sjekk disse artiklene.

I denne effekten defineres en "klasse" og deretter instantieres 50 ganger med følgende kode.

 funksjon Partikkel () // 1. Velg en partikkelmodell tilfeldig. // 2. Opprett en DOM for denne partikkelen. // 3. Generer en tilfeldig hastighet for denne partikkelen. // 4. Generer startposisjonen (punkt X og punkt Y) for denne partikkelen. // 5. Vis partikkelen på stillingen generert i 4. // 6. Generer en annen posisjon (punkt X og punkt Y) som partikkelen beveger seg på. // 7. Animer partikkelbevegelsen til stillingen generert i 6. // 8. Gjenta 6 og 7 når animasjonen nevnt i 7 er ferdig. ; funksjon randomInt (max) // Generer et tilfeldig heltall (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. Åtte-trinns logikken er pakket inn i en funksjon som heter partikkel~~POS=TRUNC. Definere en funksjon er måten å definere en 'klasse' i Javascript.
  2. Vi må generere mange tilfeldige heltall i denne effekten, fra hastighet til X-Y-stillinger. Så la oss skrive en funksjon for dette eneste formålet og nevne det randomInt. Det genererer et tilfeldig heltall mindre enn et gitt nummer. Vi bruker denne funksjonen fra tid til annen, så ikke glem det.
  3. På slutten organiserer vi partikkel~~POS=TRUNC Fungerer i en sløyfe, og skaper 50 forekomster av partikler, som hver lagres i en oppstilling som heter partikler. Vær oppmerksom på "ny'søkeord som vi bruker til å instantiere et objekt.

Noen grunnleggende innstillinger

I denne delen skal vi definere egenskaper og metoder for partikkeltaket. Og vi vil se hvordan du tilfeldigvis velger en partikkelmodell.

Vi kan bruke "dette'søkeord for å definere egenskaper for en' klasse '. Når det gjelder å definere metoder,prototype'eiendom er veien å gå. Se koden under og vi gir noen forklaringer.

 funksjon Partikkel () this.path = 'images /'; this.images = ['particle1.png', 'particle2.png', 'particle3.png', 'particle4.png']; / Tilfeldig Velg en partikkelmodell this.image = this.images [randomInt (this.images.length)]; this.file = this.path + this.image; // Opprett en partikkel DOM this.element = document.createElement ('img'); // En rekke handlinger for å ta denne.speed (). NewPoint (). Display (). NewPoint (). Fly (); ; // Generer en tilfeldig hastighet Particle.prototype.speed = funksjon () ; // Generer en tilfeldig posisjon Particle.prototype.newPoint = funksjon () ; // Vis partikkelpartikkelen.prototype.display = funksjon () ; // Animer partikkelbevegelser Particle.prototype.fly = function () ;
  1. I linje 2 og 3 definerer vi banen og filnavnene til partikkelbildene våre. Det er mer enn en partikkelbilder, så vi lagrer dem i en matrise (en egenskap av partikkel~~POS=TRUNC).
  2. I linje 6 blir et tilfeldig partikkelbilde plukket fra gruppen nevnt ovenfor. De randomInt funksjonen vi definerte tidligere er brukt her. Veldig praktisk, hah?
  3. I linje 7 sammenfatter vi banen og filnavnet.
  4. I linje 10, er en img DOM opprettet. Dette er beholderen til en partikkel.
  5. Linje 13 er kjernen i denne effekten. En sekvens av metoder kalles i en kjede. Denne ene linjen med kode dekker trinn 3 til og med 8 nevnt i forrige avsnitt. Vi går snart gjennom hver av disse metodene.
  6. Fra linje 17 helt til slutt, er fire metoder definert for partikkel~~POS=TRUNC klasse. Hver av dem tar vare på en bestemt ting for en partikkel. Hastighet() genererer tilfeldig hastighet. Newpoint () genererer et tilfeldig sett med X-Y-posisjon. Vise() sørger for at partikkelen vises riktig. Og fly() tar vare på animasjonen.
  7. Vær oppmerksom på måten vi definerer metoder for en "klasse" på linje 17, 20, 23 og 26. Nye metoder er definert i prototype eiendom av en klasse. Det kan virke litt vanskelig å gutta fra en C, Java eller PHP bakgrunn (som meg). Hvis du føler deg ubehagelig med dette, er du velkommen til å bruke et minutt å lese denne artikkelen.

Faktisk er det mange forskjellige måter å definere egenskaper og metoder for en Javascript-klasse. Her er en flott artikkel om dette emnet.

Tilfeldig hastighet

Nå har vi en ide om hvordan denne effekten fungerer. Fra denne delen begynner vi å skrive funksjoner som vi bruker til å manipulere bevegelsen av en partikkel.

Først, la oss generere en tilfeldig hastighet for en partikkel. Hastigheten bestemmer hvor fort en partikkel reiser. Hvis du er kjent med jQuery, forstår du at vi ikke bare kan passere i sann fart, si 100 piksler per sekund. Faktisk er parameteren som brukes til å beskrive hastighet i jQuery, varighet målt i millisekunder. Så spørsmålet blir hvordan man genererer en rimelig varighet der en partikkel reiser fra ett sted til et annet. Hva med følgende kode?

 // Generer Tilfeldig Speed ​​Particle.prototype.speed = funksjon () this.duration = (randomInt (10) + 5) * 1000; returnere dette; ;
  1. I linje 3 genererer vi bare et tilfeldig heltall mellom 5000 og 14000. Det vil si at en partikkel vil holde sin hastighet og retning uendret i 5-14 sekunder før du tar en sving og beveger seg mot et annet sted.
  2. Se på linje 5. Hvorfor gjør vi returnere dette? Husk at disse funksjonene vil bli kalt i en kjede? Når du returnerer det opprinnelige objektet, sørger bakfunksjonen for å fungere skikkelig. Vi trenger dette også på andre måter.
  3. Når denne funksjonen er utført, a varighet Eiendom tilgjengelig i a partikkel~~POS=TRUNC forekomst.

Tilfeldig posisjon

Et tilfeldig sett med X-Y-posisjon er meget nyttig i denne effekten. Det kan brukes til å bestemme:

  • På hvilket tidspunkt oppstår en partikkel opprinnelig,
  • Til hvilket punkt flytter en partikkel en gang den blir født eller fullfører en reise.

Her er koden vi trenger for å generere et tilfeldig sett med X-Y-posisjon.

 // Generer en tilfeldig posisjon Particle.prototype.newPoint = funksjon () this.pointX = randomInt (window.innerWidth - 100); this.pointY = randomInt (window.innerHeight - 100); returnere dette; ;

Størrelsen på det nåværende nettleservinduet kan hentes fra window.innerWidth og window.innerHeight. Hvis en partikkel flyr bortover vinduets grense, vil rullefeltene dukke opp. Vi vil kanskje ikke at det skal skje. Så la oss begrense partikkelbevegelsen i et område som er 100 piksler mindre høyt og bredt enn nettleservinduet. Ovennevnte kode skal være ganske enkel. Etter at denne funksjonen er utført, pointX og spisse eiendommer blir tilgjengelige. Når funksjonen kjører en gang til, pointX og spisse vil bli fornyet i tilfelle av partikkel~~POS=TRUNC.

Vis partikkelen

I tidligere seksjoner ble en img DOM allerede opprettet for en ny partikkel. Nå skal vi sette noen attributter og vise partikkelen et sted i nettleservinduet. Dette oppnås med følgende kode.

 // Vis partikkelpartikkelen.prototype.display = funksjon () $ (this.element) .attr ('src', this.file) .css ('posisjon', 'absolutt') .css ('topp' this.pointY) .css ('left', this.pointX); $ (Document.body) .append (this.element); returnere dette; ;
  1. I linje 3, this.element inneholder den opprettede img DOM. Vi stiller inn attributter for den i denne funksjonen.
  2. I linje 4, denne filen inneholder det tilfeldige bildet vi valgte fra fire partikkelmodellene. Ved å sette inn src attributt, vi tar partikkelbildet til den nye img DOM.
  3. Med linje 5 til 7 er partikkelen plassert et sted i nettleservinduet.
  4. I linje 8 er den img DOM som nettopp er opprettet, lagt til kroppen. Partikkelen vil aldri dukke opp med mindre vi skriver denne linjen med enkel kode.

Animere partikkelbevegelser

Til slutt har vi kommet til animasjonsdelen som kan bli enklere enn du trodde.

Animate-funksjonen i jQuery vil gjøre kunsten for oss. Det tar fire parametere: animere (parameter, varighet, lettelse, tilbakeringing). Sjekk ut dokumentasjonen hvis du ikke har noen anelse om hva den gjør.

 // Animere partikkelbevegelser Particle.prototype.fly = function () var self = this; $ (this.element) .animate ("top": this.pointY, "left": this.pointX,, this.duration, "lineær", funksjonen () self.speed (). newPoint (). fly ();); ;

Hva koden ovenfor gjør er ganske enkelt:

  1. Det animerer partikkelen til en tilfeldig posisjon.
  2. Animasjonen tar this.duration millisekunder å fullføre.
  3. Partikkelen beveger seg med konstant fart. (Easing-modus er 'lineær'.)
  4. Når animasjonen er fullført, vil koden i Linje 8 bli utført som tilbakeringinger.
  5. I linje 8 vil en ny hastighet bli generert, en ny posisjon vil bli beregnet og fly() funksjonen (den eneste vi skriver i denne delen) vil bli utført igjen.
  6. Gjenta fra trinn 1.

Så fly() funksjonen kaller seg gjentatte ganger. Med denne rekursive funksjonen går animasjonen på og av for alltid. Nå er vi i stand til å skrive hele historien om et partikkels liv. Fortsett husk følgende kjede?

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

La oss se på hva det gjør:

  1. En ny fart blir generert.
  2. Et nytt sett med X-Y-posisjon beregnes.
  3. Partikkelen vises på stillingen beregnet i trinn 3.
  4. En ny posisjon er beregnet.
  5. Partikkelen beveger seg til stillingen beregnet i trinn 5.
  6. Ny fart blir generert.
  7. Et nytt sett med X-Y-posisjon beregnes.
  8. Partikkelen beveger seg til stillingen beregnet i trinn 7.
  9. Når animasjonen er fullført, gjenta fra trinn 6.

Hvis disse trinnene høres ut som en tunge twister til deg ... Vel, se på denne figuren igjen. Du bør kunne kode hvert enkelt trinn nå. Og du bør vite hvordan å organisere alle ting i en objektorientert struktur. Endelig er firefly-effekten fullført.


Konklusjon

Nå skal alle kunne implementere denne effekten i dine egne prosjekter. Forhåpentligvis har du også en bedre forståelse av objektorientert Javascript.

Den første ting jeg elsker om denne effekten er at ved å endre bakgrunns- og partikkelbilder, kan du produsere helt annet utseende. Du kan ha fly eller til og med supermenn som flyr på nettsiden din hvis du vil. Din fantasi er grensen.

Det er alt for denne opplæringen. Håper du nyter det. Takk for at du leste!


Kode
×