Fyrverkerier (web animering) (version 1.0)

Klicka på länken för att titta på fyrverkeri animeringen (Fyrverkeri Animation).

Detta projekt är en animering av fyrverkerier som tog över 8 timmar av arbete att skapa. Om du vill visa animeringen, vänligen följ denna länk med en annan webbläsare än Internet Explorer. Jag skulle också uppskatta ert stöd i instructables teknik contest.

Här är en länk för en jsfiddle med kodkommentarer läggs till nästan varje enskild rad med JavaScript att tillåta Javascript orienterade människor att läsa tillsammans. Fyrverkeri animation med kommentar anteckningar.

Omsorg av hög CPU-användningen som svar på datorn bearbetar denna webbsida, jag ställde en fråga på kod översyn stackexchange som du kan läsa här. Svaret jag fick föreslog att använda canvas eller använda requestAnimationFrame(); (infödd Javascript-funktionen) att förhindra användningen av alla timers skriptet använder för närvarande. Jag tror jag kommer att lära canvas snart eftersom webbläsare inte är uppenbarligen byggda för att kunna bearbeta animationer som denna i DOM (dokument objektmodellen [ DOM Wikipediaartikeln ]) ensam.

Om du inte är flytande i JavaScript, kan du förstå hur detta fungerar genom att läsa nedan.

Stjärnor:

När sidan laddas, funktion initialize(); kallas som sätter upp allt. Det börjar med att ställa in stjärnorna i bakgrunden genom att skapa en stjärna med slumpmässiga x y koordinater längs vyport bredd och höjd. Det kommer att skapa en stjärna för varje pixel att visningsområdet är bred.

Visningsområdet är den synliga delen av sidan. Visningsområdets bredd är bredden på den synliga delen av sidan och visningsområdets höjd är höjden av den synliga delen av sidan.

Här är den långa definitionen av "vyport" vyport Wikipediaartikeln. Korta definitionen är att visningsområdet är området av synlig höjd av sidan (multiplicerat) synliga bredd på sidan.

Stjärnan är sedan placerad slumpmässigt inuti visningsområdet.

Skapandet av fyrverkerier:

Fyrverkerier skapas när stjärnorna är klar kommer att vara :)

Varje fyrverkeri är 100px under visningsområdet (så du inte kan se det) och tilldelas en random x-koordinaten och en slumpvis färg. Varje fyrverkeri ges också 12 strålar (de dyker upp när fyrverkeripjäs exploderar). Högst upp i dokumentet anges variablerna som som ger rotation och x-y-position varje fyrverkeri Ray, i förhållande till fyrverkeri. Dessa positioner och rotation tilldelas till varje stråle av fyrverkeri.

Om webbläsaren stöder filter:blur(); en suddig bakgrund skapas för fyrverkeri.

Fyrverkeri timingfunktioner och animation:

Efter att alla fyrverkerier skapas, den funktion fireworkTiming(); kallas. Den här funktionen loopar igenom varje fyrverkeri och kallar den kapslade funktionen createTimer();. Kapslade funktionen skapar en något varierande timer för varje fyrverkeri och när timern går ut den givna fyrverkeri är animerad mellan 7/10ths och 9/10ths av visningsområdets höjd. Om alla fyrverkerier har varit animerade, är de alla återställa till ursprungligt skick med ny position och färg tilldelningar. Efter fyrverkeri skickas i "luften", en funktion som kallas explodeTimer(); kallas som skapar en timer som väntar på fyrverkeri till nästan slut den animering som kastar den i luften och sedan expanderar fyrverkeri strålar och lägger den suddig bakgrunden för att göra det verkar som om det exploderar. En för 800 millisekunder timern och när den tiden är slut, den hela fyrverkeri börjar tona ut.

Ändra storlek på funktion:

När webbläsarfönstret ändrar storlek, måste flera saker ske för att se till att fireworks eller stjärnor fortfarande har önskat beteende. För det första återställs variablerna vyport bredd och höjd så att alla de andra beräkningar som diskuterats tidigare som beror på dessa variabler är korrekt. Eftersom omformateringsläget händelsen är en återkommande händelse och bränder ibland tiotals gånger vid storleksändring webbläsarfönster och att göra bättre effektivitet än att återskapa allt på varje ändra storlek, det finns en timer inställning som bara kallar initialize(); funktionen 100 millisekunder efter den allra sista ändra storlek på händelsen, vilket förhindrar fullständig överbelastning av webbläsaren försöker hålla jämna steg med annars överväldigande koden.