Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript lernen

Animationen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Durch zeitgesteuertes DHTML können Sie mit JavaScript leicht Animationen erzeugen. Basis ist der zeitverzögerte rekursive Aufruf von Funktionen, die dynamisch die Stylesheets eines Objekts oder andere HTML-Attribute verändern.
07:22

Transkript

In diesem Video möchte ich Ihnen Animationstechniken zeigen, D.h. eine zeitbezogene Veränderung von Teilen der Webseite. Ein Bereich, der auch mit DHTML sehr stark in Berührung kommt, aber noch eine zusätzliche Komponente, eben die Zeit mit ins Spiel bringt. Wenn wir uns mal diese Webseite anschauen, ich klicke hier auf den Button, dann sehen Sie eine kleine Animation, D.h. dieses Bild ist aus der linken Ecke herausgewachsen und immer größer geworden. Das ist nun ein pixelorientiertes Bild. Deswegen wird es jetzt etwas grobkörnig. Aber im Grunde ist das eine Animation fast auf Flash-Niveau um mal bisschen hochtrabend was zu sagen. Vielleicht erwarten Sie jetzt, dass das kompliziert ist, aber ich muss Sie enttäuschen: Das ist ein Dreizeiler, wenn man weiß, was man tut. Zuerst einmal die die Webseite und die ist harmlos, Bildreferenz und beim Bild wurde eine Anfangskurve festgelegt, hier mit der Eigenschaft "width". Das ist wichtig für die Art, wie wir hier programmieren wollen. Und dann sehen Sie noch einen Button. Mit dem Klick auf den Button soll die Animation starten. Die eigentliche Animation ist eigentlich nur eine Zeile. Ich hatte gesagt das ist ein Dreizeiler. Der Grund ist, wir müssen die Animation erst einmal starten, D.h. wir brauchen eine weitere Zeile, um auf den Buttonklick zu reagieren. Das sehen Sie hier. Das kann man, wenn man es etwas sauberer macht, im Grunde auch auf 2 Zeilen ausdehnen. Aber außer der Funktionsdeklaration, wo wollen Sie noch Code hier unterbringen? Es funktioniert so, aber ich möchte kurz erklären, was ich überhaupt tue: Zum einen haben wir hier einen On-Click-Event-Händler, womit wir die Animation aufrufen. Das ist eine Funktionsreferenz, ein Funktionszeiger, auf die Funktion "Ani". In dieser werden wir nachher rekursiv arbeiten. Rekursiv bitte mit Vorsicht zu genießen, weil in dem Moment, wo der Zeitfaktor ins Spiel kommt, ist es nach der strengen Definition keine Rekursion mehr. Ich benutze trotzdem diesen Begriff, weil ich finde das zu spitzfindig. Die Funktion selbst überprüft, ob die Eigenschaften "width", also die Breite des Bildes, das ich hier über "document.getElements" bei "Tagname" von "IMG" von "0" anspreche, noch kleiner 300 ist. Ist sie größer, ist die Funktion beendet. Ist dieser Wert allerdings kleiner, rufe ich die Funktion wieder selbst auf. Wir kommen gleich zu diesem Aufruf. Nun muss ich die Bildgröße irgendwie auch verändern, sonst haben wir keinen Effekt. D.h. ich könnte hier mit einer externen Zählvariable arbeiten, die ich immer wieder erhöhe oder sonst irgend etwas. Aber ich mache einen anderen Trick: Ich wende einen "Operator++" an; dieser erhöht, nachdem ich überprüft habe, einfach die Breite des Bildes um ein Pixel. Dadurch kann ich das sehr kompakt schreiben. Die interessanteste Geschichte für die Animation ist jetzt aber hier das: Ich rufe mich selbst auf. Ein Rekursiv- oder Selbstaufruf ist in "Javaskript" möglich, aber der entscheidende Faktor ist: Das darf nicht sofort erfolgen. Ich brauche eine gewisse Verzögerung, damit überhaupt so ein Animationseffekt, so eine Verschiebung auf dem Bildschirm erfolgen kann. Das liefert mir eine Methode, die nennt sich "window.settimeout". Wie bei allen Window-Methoden kann man auf das vorangestellte Window verzichten. Deswegen schreibe ich nur "settimeout" hierhin. Achten Sie bitte wieder auf die Case-Sensitivität, "camel notation" selbstverständlich. Das hier ist ein Funktionsaufruf, auf sich selbst allerdings. Und das hier ist ein Zeitfaktor in Millisekunden, D.h. dieser Aufruf wird jeweils um eine Millisekunde verzögert. Daraus entsteht dieser Animationseffekt. Ich kann hier auch statt dem Aufruf, aber dann bitte nicht in Hochkomma, eine Funktionsreferenz notieren. Das ist sogar eigentlich der bessere Weg. Wenn ich das jetzt mal hier kurz auf 3 Millisekunden ausdehne, werden Sie sehen, die Animation läuft langsamer. Nicht wesentlich, ist immer noch schnell und flüssig, aber sie läuft etwas langsamer, als wenn ich nur eine Millisekunde angebe. Nun basiert dieser Gag dieser Animationstechnik darauf, dass ich eine Eigenschaft verändere, die Breite, die sich einfach hervorragend verändern lässt, weil sie numerisch ist. Aber wie ist es mit Eigenschaften, die nicht unbedingt numerisch sind? Ich zeige Ihnen eine zweite Animation. Die soll so aussehen. Ich klicke hier auf "Start" und ein Bild wurde vergrößert und ausgetauscht. Ich kann das zurücksetzen und immer wieder aufrufen. Es ist etwas Ähnliches wie eben und doch ganz anders programmiert. Ich arbeite hier mit HTML-Eventhandler. Das ist aber nur aus Demonstrationszwecken und das spielt doch keine Rolle für das, was wir wirklich hier tun wollen. Der Part, mit dem wir uns hier beschäftigen, ist in der Java-Skriptdatei zu finden. Und Sie sehen von Vornherein, dass es kein Einzeiler mehr ist, kein Zwei- oder Dreizeiler, da passiert mehr. Der entscheidende Punkt ist, dass ich Eigenschaften des Style-Objekts verändere, z.B. hier die Höhe. Das Problem an dieser Aktion ist nun, dass diese Eigenschaften des Style-Objekts oft mit Einheiten versehen sind. Im Gegensatz zur "width"-Eigenschaft, die wir über HTML angesprochen haben, müssten wir über die "width"-Eigenschaft, die wir über das Style-Objekt ansprechen, immer damit rechnen, dass wir eine Einheit "px" noch im Spiel haben. Das gilt auch für die Eigenschaft "top" und "left" z.B. Von daher sehen Sie, dass ich z.B. beim Abfragen mit gewissen Methoden diese Einheit erstmal entfernen muss. Das mache ich hier mit einer Methode "parseInt" und dann ggf. zum neuen Zuweisen wieder draufaddieren muss. Das macht diese ganze Geschichte mit der Manipulation des Style-Objekts in so einer Animation etwas aufwendiger, aber das Verfahren ist klar: Beim Abfragen müssen Sie, falls Sie numerisch arbeiten wollen, die Einheiten erstmal weghauen. Und dann müssen Sie sie wieder draufaddieren. Ich benutze hier übrigens auch eine CSS-Datei, um das Bild zu positionieren, denn für die Veränderung der Positionen über "style.top" und "style.left" muss das Bild positioniert sein, absolut, sonst funktioniert das nicht. Denn dieser Effekt, dass das Bild etwas nach unten geschoben wird, nicht nur vergrößert, das ist diese Veränderung der "top"- und "left"-Eigenschaft. Zugegeben, dieser Code ist jetzt nicht mehr ganz trivial, aber der entscheidende Punkt ist wieder hier zu sehen: Der rekursive Aufruf zeitverzögert über "window.settimeout". Das ist es, was ich am Ende dieses Videos festhalten möchte. Als Fazit, über "window.settimeout" können Sie mit Selbstaufrufen hervorragend und teilweise auch sehr einfach Animationen mit Javascript durchführen, die modernsten Ansprüchen genügen, wobei dann das Coding durchaus komplizierter werden kann.

JavaScript lernen

Legen Sie los mit der Programmierung von beeindruckenden Webseiten und machen Sie sich mit den Grundstrukturen von JavaScript, Objekten und insbesondere dem DOM-Konzept vertraut.

3 Std. 6 min (36 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

DVD oder Online-Training: Was ist der Unterschied?

 

Inhaltlich sind beide Trainings absolut gleich. Der Unterschied liegt bei den Nutzungsmöglichkeiten und im Vertriebsweg.

 

Beim Training auf DVD erhalten Sie eine Box mit allen Inhalten und einem gedruckten Bonusmagazin.

Die Bezahlung erfolgt bequem per Rechnung.

 

Das Online-Training ist sofort nach dem Kauf verfügbar, jederzeit und an jedem Ort. Sie brauchen nur eine Online-Verbindung und einen gängigen Webbrowser. Wenn Sie das Training herunterladen, steht es Ihnen auf Ihrem Computer auch offline zur Verfügung.

Die Bezahlung erfolgt per Kreditkarte, Paypal oder sofortüberweisung.de (nicht in allen Ländern verfügbar).

 

Wir wünschen Ihnen viel Freude mit dem Video-Training Ihrer Wahl – ob Online oder auf DVD.

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!