Klik op de link om te kijken naar het vuurwerk animatie (Vuurwerk animatie).
Dit project is een animatie van vuurwerk heeft meer dan 8 uur werk om te maken. Als u wilt bekijken van de animatie, volg deze link met een andere browser dan Internet Explorer. Ik zou ook waarderen uw steun in de instructables technologie contest.
Hier is een link voor een jsfiddle met commentaar bij de code toegevoegd aan bijna elke tekstregel JavaScript Javascript georiënteerde mensen lezen langs te laten. Vuurwerk animatie met commentaar notes.
Uit bezorgdheid voor het hoge CPU-gebruik in reactie op de computer van verwerking van deze webpagina, mij een vraag gesteld over code review stackexchange die u kunt lezen hier. Het antwoord dat ik gekregen stelde voor om het gebruik van canvas of requestAnimationFrame(); (native javascriptfunctie) om te voorkomen dat het gebruik van alle de timers die gebruikmaakt van dit script. Ik denk dat ik zal leren doek al snel, omdat browsers zijn uiteraard niet gebouwd om het verwerken van animaties zoals dit in het DOM (document objectmodel [ wikipedia DOM artikel ]) alleen te kunnen.
Bent u niet vloeiend in JavaScript, kunt u begrijpen hoe dit werkt door lezing hieronder.
De sterren:
Wanneer de pagina wordt geladen, functie-initialize(); heet waarin alles. Het begint met het opzetten van de sterren op de achtergrond door het creëren van een ster met willekeurige x y coördinaten langs de viewport breedte en hoogte. Het maakt een ster voor elke pixel dat de viewport breed is.
Viewport is het zichtbare gedeelte van de pagina. Viewport breedte is de breedte van het zichtbare gedeelte van de pagina en viewport hoogte is de hoogte van het zichtbare gedeelte van de pagina.
Hier is de lange definitie van "viewport" viewport wikipedia-artikel. De korte definitie is dat de viewport het gebied van de zichtbare hoogte van de pagina is (vermenigvuldigd) het zichtbare breedte van de pagina.
De ster is dan willekeurig gepositioneerd binnen de viewport.
De oprichting van het vuurwerk:
Het vuurwerk worden gemaakt nadat de sterren hebben gebeëindigde komend te zijn :)
Elke vuurwerk is 100px onder de viewport (zodat je het niet kunt zien) en een willekeurige x-coördinaat en een willekeurige kleur is toegewezen. Elke vuurwerk krijgt ook 12 stralen (ze opdagen wanneer het vuurwerk ontploft). Aan de bovenkant van het document, worden de variabelen ingesteld zodat de rotatie en x-en y-positie van elke vuurwerk Vleug, ten opzichte van het vuurwerk. Deze posities en rotatie worden toegewezen aan elke straal van het vuurwerk.
Als de browser filter:blur() ondersteunt; een onscherpe achtergrond is gemaakt voor het vuurwerk.
Vuurwerk timingfuncties en animatie:
Na al het vuurwerk zijn gemaakt, de functie-fireworkTiming(); heet. Deze functie doorlopen elke vuurwerk en roept de geneste functie-createTimer();. Dit geneste functie maakt een enigszins verschillende timer voor elke vuurwerk en wanneer de timer verloopt, het gegeven vuurwerk wordt geanimeerd tussen 7/10ths en 9/10ths van de hoogte van de viewport. Als al het vuurwerk werden geanimeerd, zij alle teruggezet naar hun oorspronkelijke toestand met nieuwe positie en Kleurtoewijzingen. Na het vuurwerk wordt verzonden in de "lucht", een functie genaamd explodeTimer(); heet waardoor een timer die op het vuurwerk wacht aan bijna klaar bent met de animatie die gooit het in de lucht en vervolgens breidt de vuurwerk-stralen en voegt de onscherpe achtergrond zodat het lijkt alsof het is ontploft. Een timer voor 800 milliseconden is ingesteld en wanneer die tijd is, de gehele vuurwerk begint te vervagen.
Grootte functie:
Wanneer de grootte van het browservenster wordt gewijzigd, moeten verschillende dingen gebeuren om ervoor te zorgen dat fireworks of sterren nog steeds het gewenste gedrag. Ten eerste zijn de viewport breedte en hoogte variabelen instellen, zodat alle van de andere berekeningen die eerder besproken die afhankelijk van deze variabelen nauwkeurig zijn. Aangezien de gebeurtenis resize een terugkerende gebeurtenis is en soms tientallen keer branden wanneer het formaat van de browservensters en om je beter rendement dan om opnieuw alles op elke grootte, er is een timer setup die zullen alleen het noemen van de initialize(); functie 100 milliseconden na de allerlaatste resize, gebeurtenis, waardoor volledige overbelasting van de browser proberen bij te houden met de anders overweldigende code.
