Share
HTML ist die Sprache, in die das Web eingebaut ist, und es ist eine Art seltsames Biest. Ursprünglich war sie dazu gedacht, wissenschaftliche Informationen einfach über das Internet auszutauschen, sie wurde jedoch langsam transformiert, um die medienreiche Umgebung unterzubringen, die wir kennen und lieben. Aufgrund der zufälligen Natur von HTML (und von JavaScript, der Programmiersprache, die Elemente in HTML manipuliert und interaktiv macht), müssen wir manchmal etwas über den Tellerrand hinausdenken. In dieser Tutorialserie werde ich Ihnen zeigen, wie Sie eine Cross-Browser-Animation mit einer aufgerufenen Methode ausführen Sprit. Und da dies eine Lerngelegenheit ist, werden wir alles ohne externe Bibliotheken (wie jQuery) tun..
Dies wird eine vierteilige Serie sein. Ich werde das Spriting selbst in Teil 1 (diesem Artikel) mit ein paar grundlegenden JavaScript-Anweisungen erläutern. In späteren Raten werden wir jedoch auf einige Zwischentechniken wie Kapselung, Ereignisbehandlung und Touchscreen-Unterstützung eingehen.
Also lasst uns anfangen!
Die Animation basiert auf einem Phänomen namens Persistenz der Vision, Das bedeutet im Wesentlichen, dass, wenn Ihr Gehirn viele ähnliche Standbilder schnell genug sieht, es so aussieht, als wäre es ein bewegtes Bild. Jede Art von Film oder Video verwendet diese grundlegende Technik - viele leicht unterschiedliche Frames werden in schneller Folge gezeigt, um etwas bewegt erscheinen zu lassen. Der Film läuft typischerweise mit 24 Frames pro Sekunde (& sub1;), während das in Nordamerika ausgestrahlte Fernsehen mit 29,97 Frames pro Sekunde (& sub2;) gezeigt wird. In anderen Worten, wir möchten etwas erstellen, das ähnliche Frames sehr schnell zeigt (mehrmals pro Sekunde)..
Es gibt zwei Hauptgründe, warum Animationen im Web nur schwer zu verwenden sind:
Eine Möglichkeit, diese Probleme zu umgehen, besteht darin, ein Sprite-Blatt zu erstellen. In Elementen wie divs, können wir ein Hintergrundbild für die festlegen div das kann größer sein als das Element selbst. Wir können auch die Hintergrundposition so einstellen, dass wir genau bestimmen, welcher Teil des größeren Bildes angezeigt wird. Ein Sprite-Sheet ist ein größeres Bild, das aus mehreren kleineren Bildern besteht, die wir verschieben können, sodass es an die Stelle vieler kleiner Bilder treten kann. Schauen Sie sich das Beispiel unten mit J, dem Maskottchen meiner Firma Joust Multimedia an:
Obwohl es zehn verschiedene Bilder von J gibt, werden diese zusammen in einer größeren PNG-Datei gespeichert (wir verwenden PNGs, da sie Transparenz zeigen können). Wenn wir eine haben div Das ist nur die Größe eines der Bilder, und wir legen diese PNG als Hintergrund fest. Sie wird wie ein einzelnes Bild aussehen.
Siehe die hazdm auf CodePen.
Auch wenn dies für die Darstellung eines Bildes sehr mühsam ist, behebt diese Methode die zwei Probleme, die wir zuvor hatten. Mit sehr wenig JavaScript (einer Zeile!) Können Sie die Hintergrundposition von a ändern div, und es funktioniert auf alles. Da sich alle diese Frames in demselben Bild befinden, ist nur eine Aufforderung erforderlich, um dieses Bild in die Seite zu laden. Sobald die Seite geladen ist, kann sie problemlos zwischen Sprites wechseln.
Wie können wir das so einrichten, dass es dann leicht animiert wird? Der erste Schritt ist das Erstellen der Sprite-Tabelle. Sie möchten wissen, wie die endgültigen Abmessungen Ihres Bildes aussehen sollen, und die Sprites entsprechend in einem Raster platzieren. Zum Beispiel wird mein J-Bild 40 Pixel breit und 50 Pixel groß sein, also habe ich meine Sprites genau 40 Pixel horizontal und genau 50 Pixel vertikal aufgereiht. Am einfachsten ist es wahrscheinlich, wenn Sie Ihr Start-Sprite in der oberen linken Ecke festlegen.
Dann werden wir eine einrichten div mit etwas CSS, um sicherzustellen, dass alles richtig angezeigt wird:
Und hier ist unser CSS, um sicherzustellen, dass das Sprite korrekt angezeigt wird:
Accentsconagua
.Zeichen / * * Sehr wichtig, dass wir die Höhe und Breite * unserer Zeichen auf die Höhe und Breite der Sprites setzen * / height: 50px; Breite: 40px; / * * Wir müssen sie absolut positionieren, damit wir ihre Position innerhalb der Stufe vollständig kontrollieren können. * / Position: absolute; links: 100px; oben: 120px; #j / * * Nun setzen wir das Hintergrundbild für das Zeichen div * als erstes Sprite (in der oberen linken Ecke) * / background-image: url ('j.png'); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: 0 0; Beachten Sie die folgenden Dinge:
div auf die Größe unseres Sprites"keine Wiederholung" '0 0'-Dadurch wird das Sprite in der oberen linken Ecke angezeigtJetzt wird nur eine einzige Zeile JavaScript benötigt, um die Hintergrundposition zu ändern und das nächste Sprite anzuzeigen.
document.getElementById ('j'). style.backgroundPosition = '-40px 0px'; Hier wählen wir das Element aus (mit id = 'j') und Setzen des style-Attributs 'backgroundPosition'. Beachten Sie, dass es buchstabiert ist 'backgroundPosition' in JavaScript und nicht mögen 'Hintergrundposition' in CSS. Beachten Sie auch, dass in JavaScript das 'px' ist sowohl für die x- als auch für die y-Menge erforderlich - wir können die Zahlen nicht einfach weitergeben. Und weil wir das Hintergrundbild verschieben, müssen wir es in die entgegengesetzte Richtung verschieben, als Sie es vielleicht erwarten. Um zum Sprite auf der rechten Seite zu gelangen, muss das Bild um 40 Pixel nach links verschoben werden.
Wenn wir diesen Code nun einfach ausführen können (z. B. eine Schaltfläche), können wir sehen, wie sich die Frames in Aktion ändern: check the DIsgk on Codepen.
Darüber hinaus könnten Sie sich auch den Quellcode für diese Seite ansehen. Es hat alle Beispiele hier mit ausführlichen Kommentaren. Und hier ist das Sprite-Blatt, das ich verwende.
Was wir in diesem Tutorial behandelt haben, ist ein guter Anfang, aber es ist keine richtige Animation. Im zweiten Teil dieser Serie werden wir tatsächlich Laufen und Springen animieren, indem Sie Loops mit den verschiedenen Sprites erstellen.
Im vierten Teil werden wir Mouseovers für ein wenig Roboteraktion erstellen. Siehe die ByGtv-Codepen für eine Vorschau.
Obwohl dies eine großartige Methode zum Animieren im Web sein kann, gibt es einige Nachteile. Zunächst kann es erforderlich sein, jeden einzelnen Animationsrahmen zu erstellen, was zeitaufwändig sein kann. Zweitens verfügen Browser nicht über die genauesten Timer für die Animation. Wenn es also entscheidend ist, dass Ihre Animation perfekt läuft, funktioniert dies möglicherweise nicht. Mobile Safari (auf iPhones und iPads verwendet) verfügt außerdem über eine "Funktion". Wenn Sie ein Hintergrundbild haben, das entweder größer als 2 MB oder größer als 1024 x 1024 x 3 Pixel (oder insgesamt 3,145,728 Pixel) ist, wird es automatisch neu skaliert Bild, den Spriting-Effekt zu ruinieren. Dies bedeutet, dass wirklich große Sprites oder Animationen mit sehr vielen Sprites nicht in Frage kommen. Für einfache, kleine Animationen, die sehr interaktiv sein sollen, ist dies eine einfache und großartige Möglichkeit, etwas zu erhalten, das überall funktioniert.
1. Bevor der Ton mit Film eingeführt wurde, gab es eigentlich keine Standard-Bildrate. Die Kameras wurden mit einer Handkurbel bedient. Wenn Sie also einen Rookie-Kameramann hatten, könnte sich die Bildrate ungewollt verlangsamen und beschleunigen. In ähnlicher Weise waren weniger renommierte Kinos dafür bekannt, dass sie ihren Projektionisten sagten, sie sollten den Projektor schneller ankurbeln, um die Show zu beschleunigen, damit sie in mehr Vorführungen passen könnten. Aus diesem Grund denken wir stereotypisch, dass Pre-Sound-Filme sich als komisch schnell bewegen - die meisten wurden mit 16 bis 18 Bildern pro Sekunde gefilmt. Wenn wir sie heute mit 24 Bildern pro Sekunde spielen, bewegen sie sich schneller als ursprünglich beabsichtigt.
2. Das Fernsehen wurde ursprünglich mit 30 Bildern pro Sekunde in Nordamerika ausgestrahlt, doch Farbfernsehen verursachte bei dieser Geschwindigkeit einen Störfaktor. Die Ingenieure fanden heraus, dass sie das Problem beheben konnten, indem sie die Framerate um 0,1% verlangsamen, weshalb sie jetzt auf 29,97 fps eingestellt ist. Abgesehen von all den verrückten technischen Problemen, die mit der Konvertierung eines Films in 24 Bildern pro Sekunde für die Anzeige im Fernsehen mit 29,97 Bildern pro Sekunde verbunden sind, hat das Anzeigen von Fernsehbildern mit schnelleren Bildern pro Sekunde einen interessanten Effekt auf die Öffentlichkeit gehabt. Viele Leute, die sich die Test-Vorführungen von „The Hobbit“ mit 48 Bildern pro Sekunde anschauten, berichteten, dass der Film aufgrund der höheren Bildrate „billiger“ aussehen würde, obwohl er wesentlich qualitativ hochwertiger war als ein typischer Film, nur weil sie immer höhere Bildraten aufwiesen mit etwas im Fernsehen schauen.
