, javascript animation, der fungerer (del 2 af 4),,,,, 16,,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, i den sidste post, vi indfører idéen om, spriting, en let måde at animere i javascript, der virker i alle browsere.vi gik igennem, hvordan til at oprette den sprite, som baggrund for et image, div. og så bruge en linje af javascript ændre baggrunden position til at få det til at se ud som hvis billedet er flyttet.,,, på denne post, vi vil bruge denne teknik til at animere både løbe og springe forslag.for at skabe liv, vil vi nødt til hurtigt at ændre baggrunden holdning på et regelmæssigt interval.tag et kig på den sprite, vi bruger.,,,,,,, mød j. maskotten for mit firma, hviiket multimedier. i vores eksempel, vi har ti samlede billeder: en af j står over for, tre j løber til højre og en af j - mens står over for (med de samme antal hvert billede mod venstre).lad os starte med, at han løber til højre.for at gøre vores billede ligner det, vi bliver nødt til at gøre to ting: at ændre sprite til et andet image og flytte, okay, til højre.,, der løber til højre, animation, vi helt sikkert ikke ønsker at være fanget klikke forskellige knapper til cyklus med ånderne, så vi bliver nødt til at skabe nogle funktioner, der gør det automatisk. for vores løbende funktion, vi ønsker:,, flytte, okay, til højre lidt videre til næste billede af informationstiltag, stof til en brøkdel af et sekund til at bevare "fortsatte vision" illusion), loop - funktionen igen, og heldigvis er der en let måde at sløjfe med funktioner.en indfødt kommando i javascript ringede, settimeout, vil give os mulighed for at skabe et passende forsinkelse, efter som vi kan kalde den fungere igen (inde fra funktion), funktion run_right() (//gå lidt til højre...//ændring til det næste billede af tegnefilm...//vil kalde "run_right igen efter 200 millisekunder settimeout (function() {run_right();} 200)}, så nu har vi en funktion, der kalder sig selv igen fem gange en anden (som vil blive hurtigt nok, til at skabe liv til vores formål).husk, at browsere er ikke særlig præcist med svindlere.kan de angive tidsplanen for millisekund, men det betyder ikke, at dit manuskript vil løbe på det tidspunkt præcis!vores næste problem er, hvordan vores funktion vil vide, hvilke sprite til at skifte til?i vores eksempel, bliver vi nødt til at cyklus frem og tilbage gennem vores tre billeder (fire samlede rammer af animation).for at gøre dette skal vi give vores funktion, en smule information, til at fortælle det, til at bytte med.en gang i funktion, vil vi gøre en prøve, som vil kontrollere, der glider vi skal være på, så bytter i baggrunden holdning til den korrekte sprite.når vi opfordrer den fungere igen, vi vil vedtage næste slide som argument., funktion run_right (billede) (//gå lidt til højre...skift (billede) (//dette skifte erklæring kontrol af forskellige muligheder for "glider" sag 1: //hvis "glider" er lig med "1".dokument. getelementbyid (')'). style.backgroundposition = "- 40px 0px" settimeout (function() {run_right (2)} 200); pause, sag 2: //hvis "glider" er lig med "2".dokument. getelementbyid (')'). style.backgroundposition = "- 80px 0px" settimeout (function() {run_right (3)} 200); bryde; sag 3: //hvis "glider" er lig med "3".dokument. getelementbyid (')'). style.backgroundposition = "- 120px 0px" settimeout (function() {run_right (4);} 200); pause, sag 4: //hvis "glider" er lig med "4"...dokument. getelementbyid (')'). style.backgroundposition = "- 80px 0px" settimeout (function() {run_right (1)} 200); pauser), og når vi kalder den funktion, for første gang, skal vi sikre, at vi vedtager den begyndende skred, < input. type = "knap" værdi = "kører" onclick = "run_right (1)" /> ligeledes at flytte vores, div. til højre lidt, kan vi give den oprindelige forlod attribut i, div., så flyt, div. lidt hver gang funktion kaldes., funktion run_right (glide, venstre) (venstre = venstre + 15; //øge hans venstre attribut af 15px dokument. getelementbyid (')'). style.left = venstre + "varer" skift (billede) (//dette skifte erklæring kontrol af forskellige muligheder for "glider"sag nr. 1: //hvis "glider" er lig med "1".dokument. getelementbyid (')'). style.backgroundposition = "- 40px 0px" settimeout (function() {run_right (2, venstre)} 200); pause, sag 2: //hvis "glider" er lig med "2".dokument. getelementbyid (')'). style.backgroundposition = "- 80px 0px" settimeout (function() {run_right (3, venstre)} 200); bryde; sag 3: //hvis "glider" er lig med "3".dokument. getelementbyid (')'). style.backgroundposition = "- 120px 0px" settimeout (function() {run_right (4, venstre)} 200); pause, sag 4: //hvis "glider" er lig med "4"...dokument. getelementbyid (')'). style.backgroundposition = "- 80px 0px" settimeout (function() {run_right, stk. 1, venstre)} 200); pauser), og når vi i første omgang til at fungere, er vi nødt til at sikre, at vi vedtager den nuværende forlod holdning i vores, div.,., - lt; input type = "knap" værdi = "kører" onclick = "run_right (1 - dokument. getelementbyid (')'). offsetleft);" />,, at den informationskampagne, så nu har vi en funktion, som kaldes, vil give næring til j løber til højre.desværre har vi ingen mulighed for at stoppe det.for det første, vi bliver nødt til at gøre den funktion, hold op med at kalde sig selv, hvis j er på kanten af vores scene.for at gøre det, hver gang den funktion, løber, vil vi se en, hvis erklæring for at se, om jeg har plads til at løbe.så vil vi løbe den funktion, som normalt.hvis ikke, vil vi holde op med at kalde den funktion og returnere ham til den stående sprite., funktion run_right (glide, venstre) (//, hvis vi kan tilføje 15 pixels til venstre og j 's højre kant ikke på scenen er højre kant.hvis ((venstre + 15) < (dokument. getelementbyid ('stage '). offsetwidth - dokument. getelementbyid (') '). offsetwidth)) (//- vi har plads.fortsætte som normalt her} andre (//, hvis vi er på højre side, er vi nødt til at stoppe med at kalde den funktion, og vende tilbage til stående dokument. getelementbyid (')'). style.backgroundposition = "0px 0px"), og endelig vil vi have en måde at stoppe den funktion, når det er nødvendigt.vi kan fastsætte, settimeout(), kommando til en variabel, så stop med det, cleartimeout(), kommando.for at gøre dette er vi nødt til at erklære, at de variable uden for den funktion, så vil vi være i stand til at vende tilbage til det senere.som det er nu, vil vi erklære det som en global variabel.det er frygteligt kodning praksis, men vi vil rette op på dette i den næste stilling.det er, hvad vores funktion ud, var timer; funktion run_right (glide, venstre) (hvis ((venstre + 15) < (dokument. getelementbyid ('stage '). offsetwidth - dokument. getelementbyid (') '). offsetwidth)) (venstre = venstre + 15; //øge hans venstre attribut, som 15px dokument. getelementbyid (') '). style.left = venstre + "varer" skift (billede) (//dette skifte erklæring kontrol af forskellige muligheder for "glider" sag 1: //hvis "glider" er lig med "1".dokument. getelementbyid (')'). style.backgroundposition = "- 40px 0px" settimeout (function() {run_right (2, venstre)} 200); pause, sag 2: //hvis "glider" er lig med "2".dokument. getelementbyid (')'). style.backgroundposition = "- 80px 0px" settimeout (function() {run_right (3, venstre)} 200); bryde; sag 3: //hvis "glider" er lig med "3".dokument. getelementbyid (')'). style.backgroundposition = "- 120px 0px" settimeout (function() {run_right (4, venstre)} 200); pause, sag 4: //hvis "glider" er lig med "4"...dokument. getelementbyid (')'). style.backgroundposition = "- 80px 0px" settimeout (function() {run_right, stk. 1, venstre)} 200); pauser) andet (dokument. getelementbyid (')'). style.backgroundposition = "0px 0px"), og vi kan skabe en anden funktion er at stoppe de løbende timer og returnerer den sprite til den stående image., funktion stop_running() {nummer. getelementbyid (')'). style.backgroundposition = "0px 0px" cleartimeout (timer)}, løber til venstre, animation, nu ved låntagning koden fra vores, run_right, funktion, kan vi skabe en ny funktion for at gøre en, run_left, funktion, med nogle få ændringer,., funktion run_left (fase, venstre) (hvis ((venstre - 15) > 0) (venstre = venstre - 15.cument. getelementbyid (')'). style.left = venstre + "varer" skift (fase) (sag nr. 1: dokument. getelementbyid (')'). style.backgroundposition = "- 40px - 50px" timer = settimeout (function() {run_left (2, venstre)} 200); bryde; 2. tilfælde: dokument. getelementbyid (')'). style.backgroundposition = "- 80px - 50px" timer = settimeout (function() {run_left (3, venstre)} 200); bryde; sag 3: dokument. getelementbyid (')'). style.backgroundposition = "- 120px - 50px" timer = settimeout (function() {run_left (4, venstre)} 200); pause, sag 4: dokument. getelementbyid (')'). style.backgroundposition = "- 80px - 50px" timer = settimeout (function() {run_left, stk. 1,venstre)} 200); pauser) andet (dokument. getelementbyid (')'). style.backgroundposition = "0px - 50px"), og at hoppe animation, endelig er vi nødt til at skabe et spring funktion.vi vil vedtage to argumenter for denne funktion, som vil spore om, div., er i øjeblikket bevæger sig op og ned, og en anden, der vil spore den nuværende top attribut i, div.mellem de to, vil vi afgøre, hvilken retning, div., behov for at bevæge sig, og hvor langt vi vil flytte, div., mindre afstand i nærheden af arc for det spring for at simulere acceleration med tyngdekraft). funktion spring (op, top) {/* * vi ændrer j til hans hoppe sprite.* /dokument. getelementbyid (')'). style.backgroundposition = "- 160px 0px" /* * her, er vi nødt til at beslutte, om han vil rejse op eller ned...* hvis (& & (dokument. getelementbyid (')'). offsettop > 20)) (//, hvis han er i øjeblikket på vej op, og han er på mere end 20 pixels fra toppen af scenen...top = top - (- *. 1); //giver det os en lille er på spring, snarere end en konstant bevægelse, som løber dokument. getelementbyid (')'). style.top = top + "varer": //ændre hans holdning timer = settimeout (function() {spring (op, top).}, 60); //så ring til at fungere igen} andre, hvis () (//, hvis han er i øjeblikket på vej op, men han er næsten oppe på scenen, og har brug for at komme tilbage...i = falske; //vi skifte op med, så han vil falde i de kommende timer = settimeout (function() (loop spring (øverst)}, 60);} andre, hvis (!op & & (dokument. getelementbyid (')'). offsettop < 115)) (//, hvis han bevæger sig ned, men er mere end 5px fra jorden, han vil fortsætte med at falde.top = top + (- *. 1); //hans fald vil lidt hurtigere dokument. getelementbyid (')'). style.top = top + "varer" timer = settimeout (function() {spring (op, top)}, 60);} andre (//, hvis han bevæger sig ned, og han er i 5px af jorden.dokument. getelementbyid (')'). style.top = "120px"; //sted på jorden dokument. getelementbyid (')'). style.backgroundposition = "0px 0px"; //tilbage stående sprite //kalder vi ikke noget mere, da han står stadig på dette punkt), nu er vi kan alle fire af vore funktioner i knapper og have en prototype af en løbende og springer tegnefilm!- tjek kildekoden til denne side med kommentarer og downloade sprite blad, jeg brugte, hvis du vil.,, slut nu, selv om vi har en prototype her, kan du se, det er en lille vogn.når du klikker på mere end én knap på et tidspunkt, manuskript vil forsøge at køre begge på én gang.eller hvis du klikker springet knap igen på vej ned, jeg vil fortsætte med at falde for evigt.også, som jeg nævnte tidligere, har vi samlet variabler i vores manuskript, hvilket betyder, at det kan være vanskeligt at tilføje denne kodeks til et eksisterende side, uden at andre javascript (som også er grunden til, at jeg ikke prøvede at køre denne adfærdskodeks i denne blog side).i vores næste post, vi vil rydde op i alle disse insekter og tale om begrebet, indkapsling, og derfor er det vigtigt at skrive en god kode i den virkelige verden.