Aufgaben vom 2.6.2004 (Woche 14)

Bearbeitungszeit: bis Dienstag, 8. Juni 2004, 17:30 Uhr
Bewertungsschema

Aufgabe 1: DHTML - Ausführung Teil 2

Mit einigen Einschränkungen erlaubt DHTML auch die Programmierung von Animationen. Die Einschränkungen ergeben sich daraus, dass DHTML (und damit JavaScript) zumindest derzeit keine Befehle zum Zeichnen von Linien und nicht-rechteckigen Flächen kennt. Um mit solchen Objekte zu arbeiten, ist man auf entsprechende GIF- oder PNG-Grafiken mit transparentem Hintergrund angewiesen, was trotz der Möglichkeit, deren Höhe und Breite dynamisch zu ändern, nicht immer ganz befriedigend ist.

Animationen bestehen aus einer Reihe von Schritten mit einem gewissen zeitlichen Abstand. Damit dieser Zeitabstand eingehalten wird, muss ein Wartebefehl eingebaut werden. In praktisch allen Programmiersprachen gibt es einen solchen Befehl, der meistens sleep() heisst und als Argument die Wartezeit (z.B. in Millisekunden) erwartet. Eine Animation wird dann etwa so programmiert:

for(i = 0; i < AnzahlSchritte; i++) {
   AnimationsSchritt(i); // Eine selbst programmierte Funktion 
   sleep(50); // nach 50 ms = 1/20 s der naechste Schritt
}
  

In JavaScript fehlt eine solche Funktion. Statt dessen gibt es die Befehle setInterval() und setTimeout(). Diese Funktionen erwarten als erstes Argument einen beliebigen Programmierbefehl inkl. abschliessenden Strichpunkt, eingeschlossen in einfache oder doppelte Gänsefüsschen (ein absoluter Schandfleck für eine Programmiersprache). Als zweites Argument erwarten sie eine Zeitangabe in Millisekunden. Im Fall von setInterval() wird dieser Befehl von da an immer wieder ausgeführt, im Abstand von so vielen Millisekunden, wie im zweiten Argument angegeben wird. Bei setTimeout() wird der Befehl nur einmal, nach entsprechend vielen Millisekunden, ausgeführt. Will man setTimeout() für eine Animation verwenden, muss man es nach jedem Schritt erneut aufrufen, hat dann aber gegenüber setInverval() den Vorteil, dass man die Zeit zwischen zwei Schritten variieren kann.

Mit setTimeout() sieht das obige Beispiel, nach JavaScript übertragen, so aus:

var i = 0;   // ausserhalb von allen Funktionen definieren

function naechsterSchritt() {
   Animationsschritt(i); // Eine selbst programmierte Funktion 
   if(++i < AnzahlSchritte)
      setTimeout('naechsterSchritt();', 50);
}

naechsterSchritt();  // Dieser Befehl setzt die Animation in Gang

Um das Beispiel zu konkretisieren und auch gleich zu zeigen, wie dieser allgemeine Rahmen im konkreten Fall variieren kann, lassen wir eine Überschrift quer über den Bildschirm laufen. Dazu müssen wir zuerst die Breite des Fensters ermitteln, was einige hässliche Programmzeilen erfordert, weil Mozilla und Internet Explorer die Fensterbreite in unterschiedlichen Variablen speichern. Wir setzten dann einen <div>-Bereich ganz rechts an den Bildschirm und schieben ihn Stück für Stück nach links. Wenn er links verschwunden ist, beginnen wir rechts erneut:

Um die Laufschrift in Aktion zu sehen, klicken Sie hier.

Will man zwei oder mehr Animationen parallel laufen lassen, so muss die Funktion Animationsschritt() einfach mehrere Objekte pro Schritt bewegen. So kann man zum Beispiel zwei Lauftexte ineinander laufen lassen. Der entsprechende Code sieht dann so aus:

In dem Beispiel ist zu beachten, dass beide Texte je relativ zu einem <div>-Bereich positioniert werden, der aber in beiden Fällen absolut und identisch positioniert ist. Nur so lässt sich, zusammen mit der Angabe overflow:hidden, verhindern, dass die anfangs über den Bilschirmrand hinauslappenden Bereiche einen vertikalen Scrollbalken erzeugen, der die Animation stört. Beim Internet Explorer 5 für Macintosh (Classic oder OS X) führt allerdings gerade diese Massnahme dazu, dass die Laufschrift überhaupt nicht angezeigt wird.

Will man mehrere Animationen hintereinander laufen lassen, braucht man in der Funktion naechsterSchritt() eine zusätzliche Variable, um zu zählen, welche Animation gerade am laufen ist. Um dies zu zeigen, wurde das obige Beispiel noch um eine Sequenz erweitert, in der sich die zusammengelaufenen Schriften rot färben. Der Quelltext ist im folgenden aufgelistet, für das lauffähige Beispiel (wieder nicht auf IE 5 für Mac) klicken Sie hier.

Ihre Aufgabe

Schreiben Sie selbst eine kleine Animation, mit der Sie z.B. Ihre Willkommensseite schmücken können. Versuchen Sie, etwas möglichst eigenes herzustellen, also nicht einfach einen Lauftext von links nach rechts, der grün wird und auch keinen Lauftext von oben nach unten, der später auf zwei Seiten auseinander wandert.