Share
Im letzten Post haben wir die Idee von vorgestellt Sprit, Eine einfache Möglichkeit zum Animieren in JavaScript, die in allen Browsern funktioniert. Wir haben auch durchgegangen, wie man das Sprite als Hintergrundbild für a einrichten kann div Verwenden Sie dann eine Zeile JavaScript, um die Hintergrundposition so zu ändern, dass sie so aussieht, als ob das Bild verschoben wurde.
In diesem Beitrag werden wir diese Technik verwenden, um sowohl Lauf- als auch Sprungbewegungen zu animieren. Um die Animation erstellen zu können, müssen wir die Hintergrundposition in regelmäßigen Abständen schnell ändern. Schauen Sie sich noch einmal das Sprite an, das wir verwenden.
Lernen Sie J kennen, das Maskottchen für meine Firma, Joust Multimedia.
In unserem Beispiel haben wir insgesamt zehn Bilder: Eines von J steht nach rechts gerichtet, drei von J laufen nach rechts und eines von J springt, während es nach rechts blickt (wobei die gleiche Anzahl jedes Frames nach links zeigt). Beginnen wir damit, ihn nach rechts laufen zu lassen. Damit unser Image so aussieht, als würde es laufen, müssen wir zwei Dinge tun: Ändern Sie das Sprite in ein anderes Image und verschieben Sie das div nach rechts.
Wir werden auf keinen Fall steckenbleiben müssen, wenn Sie auf verschiedene Schaltflächen klicken, um die Sprites zu durchlaufen. Daher müssen wir einige Funktionen erstellen, die dies automatisch tun.
Für unsere Lauffunktion möchten wir:
Accentsconagua
div nach rechts etwas Zum Glück gibt es eine einfache Möglichkeit, mit Funktionen zu arbeiten. Ein nativer Befehl in JavaScript aufgerufen setTimeout erlaubt uns, eine zeitliche Verzögerung zu erzeugen, nach der wir die Funktion erneut aufrufen werden (innerhalb der Funktion).
function run_right () // Leicht nach rechts bewegen ... // Zum nächsten Animationsbild wechseln ... // Ruft nach 200 Millisekunden erneut 'run_right' auf. setTimeout (function () run_right ();, 200);
Jetzt haben wir eine Funktion, die sich fünfmal pro Sekunde erneut aufruft (was schnell genug ist, um Animationen für unsere Zwecke zu erstellen). Denken Sie daran, dass Browser mit ihren Timern nicht besonders genau arbeiten. Sie können den Zeitpunkt für die Millisekunde angeben. Das bedeutet jedoch nicht, dass Ihr Skript genau zu diesem Zeitpunkt ausgeführt wird!
Unser nächstes zu lösendes Problem ist, wie wird unsere Funktion wissen, in welches Sprite sie wechseln soll? In unserem Beispiel müssen wir unsere drei Bilder durchlaufen (um insgesamt vier Animationsbilder zu erhalten). Um dies zu tun, übergeben wir unserer Funktion ein paar Informationen, um zu sagen, zu welcher Folie gewechselt werden soll. Sobald wir uns in der Funktion befinden, werden wir einen Test durchführen, der überprüft, welche Folie wir einschalten sollen, und dann die Hintergrundposition auf das richtige Sprite setzen. Wenn wir die Funktion erneut aufrufen, übergeben wir die nächste Folie als Argument.
Funktion run_right (slide) // Leicht nach rechts schieben… switch (slide) // Diese switch-Anweisung prüft, ob es für Slide 1 unterschiedliche Möglichkeiten gibt: // Wenn 'Slide' gleich '1' ist ... document.getElementById ( 'j'). style.backgroundPosition = "-40px 0px"; setTimeout (function () run_right (2);, 200); brechen; case 2: // wenn 'slide' gleich '2' ist ... document.getElementById ('j'). style.backgroundPosition = "-80px 0px"; setTimeout (function () run_right (3);, 200); brechen; case 3: // wenn 'slide' gleich '3' ist ... document.getElementById ('j'). style.backgroundPosition = "-120px 0px"; setTimeout (function () run_right (4);, 200); brechen; Fall 4: // Wenn "Folie" gleich "4" ist ... document.getElementById ('j'). style.backgroundPosition = "-80px 0px"; setTimeout (function () run_right (1);, 200); brechen; Wenn wir nun die Funktion zum ersten Mal aufrufen, müssen wir sicherstellen, dass wir die Startfolie passieren.
Genauso um unsere zu bewegen div etwas nach rechts können wir das anfängliche linke Attribut von übergeben div, dann bewegen Sie die div leicht bei jedem Aufruf der Funktion.
Funktion run_right (Folie, links) left = left + 15; // Erhöht sein linkes Attribut um 15px document.getElementById ('j'). Style.left = left + "px"; switch (slide) // Diese switch-Anweisung sucht nach verschiedenen Möglichkeiten für 'slide' case 1: // wenn 'slide' gleich '1' ist ... document.getElementById ('j'). style.backgroundPosition = "-40px 0px" ; setTimeout (function () run_right (2, links);, 200); brechen; case 2: // wenn 'slide' gleich '2' ist ... document.getElementById ('j'). style.backgroundPosition = "-80px 0px"; setTimeout (function () run_right (3, links);, 200); brechen; case 3: // wenn 'slide' gleich '3' ist ... document.getElementById ('j'). style.backgroundPosition = "-120px 0px"; setTimeout (function () run_right (4, links);, 200); brechen; Fall 4: // Wenn "Folie" gleich "4" ist ... document.getElementById ('j'). style.backgroundPosition = "-80px 0px"; setTimeout (function () run_right (1, links);, 200); brechen; Und wenn wir die Funktion anfangs aufrufen, müssen wir sicherstellen, dass wir die aktuelle linke Position unserer übergeben div.
Jetzt haben wir eine Funktion, die J bei Aufruf dazu animiert, nach rechts zu laufen. Leider haben wir keine Möglichkeit, es zu stoppen. Zuerst müssen wir die Funktion aufhören, sich selbst aufzurufen, wenn J an den Rand unserer Bühne läuft. Dazu wird jedes Mal, wenn die Funktion ausgeführt wird, ein überprüft ob Anweisung, um zu sehen, ob J Platz hat, um weiter zu laufen Wenn ja, werden wir die Funktion normal ausführen. Wenn nicht, werden wir die Funktion nicht mehr aufrufen und ihn zum stehenden Sprite zurückbringen.
Funktion run_right (Slide, left) // Wenn wir 15 Pixel links hinzufügen können und Js rechter Rand nicht am rechten Rand der Bühne liegt, ... wenn ((links + 15) < (document.getElementById('stage').offsetWidth - document.getElementById('j').offsetWidth)) // We have room! Continue like normal here else // if we are on the right edge, we need to stop calling the function and return to standing document.getElementById('j').style.backgroundPosition = "0px 0px"; Schließlich möchten wir eine Möglichkeit haben, die Funktion bei Bedarf zu stoppen. Wir können das einstellen setTimeout () Befehl an eine Variable, dann stoppen Sie sie mit der clearTimeout () Befehl. Dazu müssen wir diese Variable außerhalb der Funktion deklarieren, damit wir später darauf zurückgreifen können. Im Moment werden wir es als globale Variable deklarieren. Das ist eine schreckliche Kodierungspraxis, aber wir werden dies im nächsten Post korrigieren. So sieht unsere Funktion aus.
var Timer; Funktion run_right (Folie, links) if ((links + 15) < (document.getElementById('stage').offsetWidth - document.getElementById('j').offsetWidth)) left = left + 15; // Increase his left attribute by 15px document.getElementById('j').style.left = left+"px"; switch (slide) // this switch statement checks for different possibilities for 'slide' case 1: // if 'slide' equals '1'… document.getElementById('j').style.backgroundPosition = "-40px 0px"; setTimeout(function()run_right(2, left);, 200); break; case 2: // if 'slide' equals '2'… document.getElementById('j').style.backgroundPosition = "-80px 0px"; setTimeout(function()run_right(3, left);, 200); break; case 3: // if 'slide' equals '3'… document.getElementById('j').style.backgroundPosition = "-120px 0px"; setTimeout(function()run_right(4, left);, 200); break; case 4: // if 'slide' equals '4'… document.getElementById('j').style.backgroundPosition = "-80px 0px"; setTimeout(function()run_right(1, left);, 200); break; else document.getElementById('j').style.backgroundPosition = "0px 0px"; Und wir können eine weitere Funktion erstellen, um den laufenden Timer zu stoppen und das Sprite zum Standbild zurückzukehren.
function stop_running () document.getElementById ('j'). style.backgroundPosition = "0px 0px"; clearTimeout (Timer); Nun, indem Sie den Code von unserem ausleihen run_right Funktion können wir eine weitere Funktion erstellen, um eine run_left Funktion, mit nur wenigen Modifikationen.
Funktion run_left (Stufe links) if ((links - 15)> 0) links = links - 15; document.getElementById ('j'). style.left = left + "px"; switch (stage) Fall 1: document.getElementById ('j'). style.backgroundPosition = "-40px -50px"; timer = setTimeout (function () run_left (2, links);, 200); brechen; Fall 2: document.getElementById ('j'). style.backgroundPosition = "-80px -50px"; timer = setTimeout (function () run_left (3, links);, 200); brechen; case 3: document.getElementById ('j'). style.backgroundPosition = "-120px -50px"; timer = setTimeout (function () run_left (4, links);, 200); brechen; Fall 4: document.getElementById ('j'). style.backgroundPosition = "-80px -50px"; timer = setTimeout (function () run_left (1, links);, 200); brechen; else document.getElementById ('j'). style.backgroundPosition = "0px -50px"; Schließlich müssen wir eine Sprungfunktion erstellen. Wir werden zwei Argumente an diese Funktion übergeben, eines, das verfolgt, ob die div bewegt sich derzeit aufwärts oder abwärts und ein anderer, der das aktuelle Topattribut der div. Zwischen den beiden bestimmen wir, in welche Richtung die div muss als nächstes weitergehen und wie weit (wir werden das verschieben div weniger Entfernung in der Nähe des Sprungbogens, um die Beschleunigung mit der Schwerkraft zu simulieren).
Funktionssprung (nach oben, oben) / * * Wir ändern J zu seinem springenden Sprite… * / document.getElementById ('j'). style.backgroundPosition = "-160px 0px"; / * * Hier müssen wir entscheiden, ob er aufwärts oder abwärts fahren soll… * / if (up && (document.getElementById ('j'). OffsetTop> 20)) // wenn er gerade nach oben geht, und er ist mehr als 20 Pixel von der Oberseite der Bühne entfernt ... oben = oben - (oben * .1); // Dies gibt uns einen leichten Bogen im Sprung und nicht eine konstante Bewegung wie das Ausführen von document.getElementById ('j'). Style.top = top + "px"; // seine Position ändern timer = setTimeout (function () jump (up, top);, 60); // Dann rufen Sie die Funktion erneut auf else if (up) // wenn er sich gerade nach oben bewegt, aber er ist fast auf der Bühne und muss wieder herunterkommen ... up = false; // wir wechseln die 'Up'-Variable so, dass er in der nächsten Schleife fällt Timer = setTimeout (function () jump (up, top);, 60); else if (! up && (document.getElementById ('j'). offsetTop.) < 115)) // if he is moving down, but is more than 5px from the ground, he will continue to fall… top = top + (top * .1); // His fall will slightly accelerate document.getElementById('j').style.top = top+"px"; timer = setTimeout(function()jump(up, top);, 60); else // If he is moving down, and he is within 5px of the ground… document.getElementById('j').style.top = "120px"; // Place him on the ground document.getElementById('j').style.backgroundPosition = "0px 0px"; // return to standing sprite // We do not call the loop anymore since he is standing still at this point Jetzt können wir alle vier Funktionen in Schaltflächen einfügen und einen Prototyp einer laufenden und springenden Animation erstellen! Bitte überprüfen Sie den Quellcode für diese Seite mit Kommentaren und laden Sie das Sprite-Datenblatt herunter, das ich verwendet habe, wenn Sie möchten.
Obwohl wir hier einen funktionierenden Prototyp haben, stellen Sie möglicherweise fest, dass es ein bisschen fehlerhaft ist. Wenn Sie auf mehr als eine Schaltfläche klicken, versucht das Skript, beide gleichzeitig auszuführen. Wenn Sie auf den Abwärtspfeil erneut klicken, wird J für immer weiter fallen. Wie bereits erwähnt, haben wir globale Variablen in unserem Skript. Das bedeutet, dass es möglicherweise schwierig ist, diesen Code in eine vorhandene Seite einzufügen, ohne dass anderes JavaScript abgebrochen wird. Aus diesem Grund habe ich nicht versucht, diesen Code in diesem Blog auszuführen Seite). In unserem nächsten Beitrag werden wir alle diese Fehler beseitigen und über das Konzept von sprechen Verkapselung und warum es wichtig ist, guten Code in der realen Welt zu schreiben.
