Kombination von Pixel-Grafik und Objekt-Grafik

• Pixel-Objekte kann man - ebenso wie jedes andere Objekt der SVG-Grafik verschieben, drehen, vergrößern, verzerren, ...
Hier wird die Bewegung des Mondes mit einem Javascript-Programm simuliert.

• Eine SVG-Grafik kann auch Hyperlinks enthalten: Die Animation wird mit Klick auf den roten Text gestoppt. Mit ähnlichen Mitteln kann jede SVG-Grafik beliebige Elemente zu ihrer interaktiven Steuerung enthalten. Die Javascript Programme lassen sich auch aus anderen Dokumenten fernsteuern, z.B. von hier:
Umschalter, Schnell, Normal, Langsam

Die Bilder wurden 1990 von der Raumsonde Galileo aufgenommen. Der Abstand von Erde und Mond wird stark verkürzt dargestellt. Er beträgt in der Realität ca. 30 Erd-Durchmesser.


Programmierung des Beispiels Erde + Mond



▶  Mit diesem Link wird der Quelltext der Mini-Webseite angezeigt: Sie können den Text in einer Datei *.html am eigenen PC speichern und mit jedem Browser-Programm öffnen.
Wenn sie den Link mit RechtsKlick in einem eigenen Browser-Fenster öffnen, dann können die den Quelltext bequem neben den Kommentaren dieser Seite anzeigen.



Sowohl Animation als auch die Interaktive Steuerung werden von → Javascript-Funktionen durchgeführt, die in den SVG-Quelltext eingebettet sind.

Darüber hinaus wird demonstriert, dass man diese Javascript-Funktionen auch von einem übergeordneten Dokument (=dieser Webseite) fernsteuern kann.

  Die Hinweise dieses Kapitels sind auf die wesentlichen Inhalte gekürzt. Fortgeschrittene EntwicklerInnen können die Details aus dem Original Quelltext entnehmen.



Die Bewegung wird nur mit einfachsten Mitteln, aber trotzdem halbwegs realistisch dargestellt.
Dazu wurde die Bahn-Ellipse in 2 Hälften geteilt. Bei jedem Umlauf wird die Sichtbarkeit der Objekte geändert:
Der Mond im Vordergrund deckt die Erde und beide Bahnen ab, der Mond im Hintergrund deckt nur den hinteren Teil der Bahn ab und wird selbst von der Erde und der vorderen Bahn abgedeckt.



Die Funktion move() führt die Animation durch. Sie wird nur dann ausgeführt, wenn die globale Variable ani wahr (true) ist.
In den Variablen posx,posy wird die aktuelle Mond-Position berechnet und in der Variablen txt in die Syntax ('Grammatik') des SVG transform-Attributs übersetzt.
Danach wird verzweigt, je nachdem, ob sich der Mond im Vordergrund oder im Hintergrund befiindet. Mit der → DOM-Methode setAttribute() wird das transform-Attribut der Mond-Gruppe und damit die Position des Mondes geändert. Wenn das Ende des jeweiligen Pfads erreicht ist, dann wird von Vordergrund auf Hintergrund umgeschaltet und umgekehrt.
Zuletzt wird mit der Standard-Methode setTimeout() ein Ereignis (Event) programmiert, welches die gleiche Funktion nach Ablauf der in der Variablen tms angegebenen Zeit erneut aufruft.

Das Beispiel lässt sich fernsteuern, wenn es - wie auf dieser Seite - in ein anderes Dokument eingebettet ist (nächster ↓ Absatz).
Die Funktion do_startstop() (links beschrieben) kann auch vom parent-Dokument verwendet werden, wenn man den Namen des verwendeten HTML-Innenrahmens voransetzt, z.B. hier mit
if1.do_startstop();
Die Funktion ani_speed() dient nur zur Fernsteuerung der Geschwindigkeit und wird vom Beispiel selbst nicht verwendet. Damit werden beliebige Werte an die globalen Variablen tms (Wiederholungszeit für das Timeout-Event) und dw /span>(Änderung des Winkels pro Animations-Schritt) übergeben. Die Werte werden zur Vereinfachung nicht kontrolliert (validiert). Es liegt daher in der Verantwortung des fernsteuernden Dokuments, brauchbare Werte zu senden. Beispiel für normale Geschwindigkeit (tms=53ms, dw=1.0°):
if1.ani_sped(53, 1.0);



Zur Fernsteuerung der javascript-Funktionen kann man → HTML <a>-HyperLink-Elemente verwenden, z.B. für Start und Stop der Animation
<a href="javascript:if1.do_startstop()">
Umschalter
</a>
oder zur Änderung der Geschwindigkeit
<a href="javascript:if1.ani_speed(13,1.8)">
Schnell
</a>,
<a href="javascript:if1.ani_speed(53,0.3)">
Langsam
</a>



Einziger Grund für die Inline-Einbettung ist, dass derzeit die automatische → Einstellung der passenden Größe für mobile Geräte (Smartphones) nur mit HTML zuverlässig funktioniert.



Vor-definierte Elemente werden als <use>-Elemente in die Grafik eingesetzt und mit href-Attibruten ausgewählt - hier die beiden PixelGrafik-Elemente.
Der Mond wird 2mal (Vordergrund, Hintergrund) eingesetzt, Mit der → CSS-Eigenschaft visibility wird jedoch immer nur eine der beiden Versionen angezeigt. Mit diesem Trick kann die Reihenfolge der Elemente (von hinten nach vorne) so erhalten bleiben wie im Quelltext vorgegeben.

Von den beiden <text>-Elementen (am Ende des Quelltextes) wird ebenfalls immer nur eines (Start oder Stop) angezeigt. Sie sind daher in ein <g>-Gruppen-Element eingeschlossen, welches beide Texte an die gleiche Position zeichnet.

Alle Elemente, deren Eigenschaften mit Javascript-Programmen geändert werden sollen, müssen ein eindeutiges id-Attribut erhalten. Damit werden sie mit der Standard → DOM-Methode getElementById() adressiert.

Quelltext


Hier wird der ↗ Original-Quelltext der als Beispiel eingebetteten Mini-Webseite angezeigt.