SVG/ Animationsbeispiele

Beispiele

Das Sonnensystem

Vereinfachte Darstellung unseres Sonnensystems mit Sonne (gelb), acht Planeten (weiß) und den Zwergplaneten (rot) Pluto, Eris, Makemake, Haumea und Ceres und einigen Kleinplaneten (magenta): Vesta, Pallas, Hygiea, Sedna, Orcus, Quaoar, Varuna, Ixion, Buffy_2004_XR190 (Buffy ist nur ein Spitzname) und zwei weitere bislang unbenannte. Man beachte, es gibt größere Monde im System als die Zwergplaneten und Ganymed vom Jupiter und Titan vom Saturn sind sogar größer als der Planet Merkur, aber die Umlaufbahn eines Mondes ist typisch unterhalb der Größe eines Pixels welches den jeweiligen Planeten repräsentiert, siehe unten: Näherungen.

Eine Animationszeit von 10 Sekunden repräsentiert ein Jahr. Eine Astronomischen Einheit (AU) entspricht bei der Ausgangsvergrößerung 10 Pixeln. Einige weit draußen liegende Umlaufbahnen und Objekte (besonders Sedna) sind erst zu erkennen, wenn der Maßstab verkleinert wird. Skalieren geht mit den Knöpfen rechts.

Näherungen:
1) Für jeden Planeten ist die Bewegung unabhängig ohne eine Wechselwirkung mit anderen Planeten.
2) Die Animation für jedes Objekt beginnt im Periapsis, daher bezieht sich die Animation nicht auf eine bestimmte Zeit des kompletten Systems.
3) Die Durchmesser von Sonne und Planeten werden typisch größer dargestellt als sie sind (sonst wären sie nicht sichtbar).
4) Eine Projektion auf die Ebene der Erdbahn wird dargestellt, weil die Umlaufbahnen unterschiedliche Inklinationen haben.
5) Die Bewegung der Objekte wird mit einfachen großen Wertelisten für Ort und Zeit genähert, nicht mit elliptischen Bögen oder stetig differenzierbaren Kurven und Geschwindigkeiten, durch die vielen Punkte der Wertelisten wird das aber gut ausgeglichen. Eine Alternative bei etwa gleicher Dateigröße wäre mit weniger Punkten und kubischen Kurven auch möglich, aber auch aufwendiger zu berechnen, ohne ein sichtbar deutlich besseres Ergebnis zu erzielen.

Beim Drüberfahren mit der Maus oder einer Aktivierung eines Objektes werden zusätzliche Informationen angezeigt. Die Anzeige kann wieder mit einem weiteren Klick oder einer Aktivierung der Anzeige entfernt werden.

Sonne, Planet, Mond

Ein System mit Sonne, Planet, Mond wird animiert

Näherung unabhängiger Bewegung von Sonne, Planet und Mond. Die Parameter sind aus der Luft gegriffen. Als Phantasiehintergrund sind einige Sterne und Pulsare angedeutet.

Natürlich sind für die üblichen Verhältnisse die Durchmesser der Objekte viel zu groß dargestellt, zudem sind Planet und Mond relativ zur Sonne sehr schwer gewählt, um einen deutlichen Effekt der Bewegung relativ zueinander zu erzielen. Allerdings sind die meisten Planeten, die bislang außerhalb unseres Sonnensystems gefunden werden, wirklich relativ schwer, was daran liegt, dass solche schweren Planeten leichter zu entdecken sind.

Die Bewegung von Planet und Mond relativ zueinander einerseits und dieses Systems relativ zur Sonne wird jeweils näherungsweise als Zweikörperproblem behandelt, so dass hier auch Stabilitätsprobleme nicht näher untersucht wurden. Für Zweikörperprobleme mit Gravitationswechselwirkung gibt es in der klassischen Mechanik analytische Lösungen, nach denen die Bewegungen bestimmt wurden. Notiert werden wie im vorherigen Beispiel Listen für values und keyTimes. Eine bessere Näherung ist mit entsprechend mehr Aufwand möglich, führt aber zu keiner nennenswerten Änderung der mit dem Auge wahrnehmbaren Bewegung.

Lunarzentrisches Weltbild

Näherung unabhängiger Bewegung von Sonne, Planet und Mond. Es handelt sich um eine lunarzentrische Darstellung, der Mond ist also in der Mitte mittels zeitabhängiger Transformationen fixiert. Die Parameter des Systems sind aus der Luft gegriffen. Als Phantasiehintergrund sind einige Sterne und Pulsare angedeutet.

Das Beispiel ist ähnlich berechnet wie das vorherige. Es zeigt allerdings auch deutlich sehr hilfreiche Tricks aus der Mathematik und Physik, welche auch bei Animationen sehr hilfreich sein können. Ein Problem wird in mehrere einzelne Probleme zerlegt, die getrennt voneinander gelöst werden. Gelöst wird ein Problem in einem Koordinatensystem, in dem die Betrachtung einfach ist. Nach der Lösung erfolgt eine Transformation zurück ins gewünschte darzustellende System. Zudem ist es meist hilfreich, kompliziertere Probleme in Koordinaten zu betrachten, die voneinander separiert sind, sofern das möglich ist, die sich also unabhängig voneinander verhalten. Bei Animationen heißt das, solche Koordinaten möglichst einzeln zu animieren. Damit ist es hier möglich, einen ziemlich komplizierten Bewegungsablauf durch eine Kombination mehrerer einfacher periodischer Bewegungen darzustellen. Damit ist die Dauer der Animation nicht mehr begrenzt durch die Dateigröße, was bei nicht periodischen Bewegungen zwangsläufig der Fall ist.

Optischer Stoß

Vereinfachte Darstellung eines optischen Stoßes.

In der Animation ist ein optischer Stoß des Stoßpaares Na+Ne im Schwerpunktsystem dargestellt. Es wird ein klassisches Modell mit einer Trajektorie (Bahnkurve, cyan) für den Abstandsvektor der beiden Atome voneinander verwendet. Der Stoß lässt sich nun so beschreiben, dass das Neon-Atom (grün) an einem Punkt festgehalten wird und das Natrium-Atom im Grundzustand (blau) von links einläuft. Mit einem Laser, der senkrecht zur Zeichenebene eingestrahlt wird, wird Licht angeboten, welches weder für Natrium noch für Neon alleine resonant ist, jedoch in der Nähe des Überganges des Natriums vom Grundzustand in den ersten angeregten Zustand liegt. Bei kleinen Abständen des Natriums zum Neon ändert sich durch die Wechselwirkung der Atome untereinander die Resonanzenergie des Stoßpaares. Bei einem bestimmten Abstand der Atome ist die Resonanzbedingung erfüllt. Dieser Abstand wird Condonradius genannt. Abstände mit dem Condonradius sind als gelber Kreis dargestellt. Der Schnittpunkt der Trajektorie mit dem Kreis mit dem Condonradius ergibt den Ort der möglichen Anregung. Das Natrium kann also während des Stoßes angeregt werden. Im Gegensatz zum kugelsymmetrischen Grundzustand hat der angeregte Zustand eine andere Form, welche ausgerichtet ist. Ausrichtung und Form können direkt gemessen werden (Messpunkte, schwarze Sterne; Polarisationsabhängigkeit des Übergangsdipolmomentes). Im dargestellten Beispiel steht der angeregte Zustand in Richtung der Kernverbindungsachse - Ausrichtung und Kernverbindungsachse für den Moment der Anregung sind direkt aus den Meßpunkten zu entnehmen. Nach der Anregung läuft das Natrium-Atom nach rechts aus (rot bis magenta). Die Ausrichtung des angeregten Zustandes dreht sich bei kleinen Abständen noch weiter mit in Richtung der Kernverbindungsachse, bleibt dann aber stehen. Die Zeitentwicklung des Zustandes nach der Anregung führt außerdem zu einer Veränderung seiner Form.

Der dargestellte Kasten hat eine Kantenlänge von 20 Bohrschen Radien oder etwas mehr als einem Nanometer. Die Relativgeschwindigkeit der beiden Atome ist etwa 1200 m/s. Der Bereich wird also etwa in einer Pikosekunde durchquert.

Aktivieren oder anklickern des Logos unten zeigt den Moment der Anregung 20s als unbewegtes Bild.

Bahnhofsuhr

Diese Bahnhofsuhr zeigt die aktuelle Uhrzeit, wenn 'wallclock' unterstützt wird

Die Zeiger der Uhr werden mittels animateTransform gedreht. Gestartet wird die Animation der Zeiger mittels begin="wallclock(00:00)", also jeweils um 0 Uhr lokaler Zeit, so dass zum Zeitpunkt des Betrachtens die aktuelle Zeit dargestellt wird.

Während der Stundenzeiger sich kontinuierlich und gleichmäßig dreht, ist die Bewegung des Minutenzeigers diskret und kumulativ (Verwendung von accumulate="sum"). Beim Sekundenzeiger werden gar keyTimes und keySplines verwendet, um eine ungleichmäßige, kontinuierliche Bewegung herbeizuführen. Interessanterweise sind die keyTimes so gewählt, dass die Uhr meist falsch geht und dies erst wieder korrigiert, wenn sie bei der Vollendung einer Minute einen Moment abwartet (das hängt mit der Synchronisationsmethode bestimmter historischer Bahnhofsuhren zusammen, die zur vollen Minute von einer Zentraluhr synchronisiert wurden).

Stellbare Analoguhr

Eine einfache Uhr wird animiert. Anders als bei der vorherigen Uhr muss diese vom Nutzer gestellt werden. Das ist bei einer gleichmäßig laufenden Uhr mit deklarativer Animation recht einfach möglich; das Stellen erfolgt durch zusätzliche, interaktiv gesteuerte Animationen, mit denen sich die Zeiger im richtigen Verhältnis zueinander, insgesamt aber schneller laufen als die Uhr im Normalbetrieb.

Die Uhr wird mittels der der Knöpfe S (schnell), N (normal), L (langsam) gestellt, starten geht mit mousedown, stoppen mit mouseup. Mit dem Startknopf wird die normale Uhr gestartet.

Modell des Sockels der Trajanssäule (in Rom)

Modell des Sockels der Trajanssäule (in Rom); interaktiv

Verschiedene Segmente des Sockels können durch anklickern verschoben werden. Dazu wird animateMotion verwendet. Zusätzlich werden durch das Anklickern auch Teile der Segmente (als Umrisse) per set erst sichtbar gemacht. Für die Animation mit animateMotion werden für den Zeitablauf keyTimes verwendet und das Vor und Zurück wird durch eine nicht monotone Liste von keyPoints erreicht.

Karte: Osmanisches Reich 1300-1923

Als Beispiel für eine interaktive historische Karte sei das Osmanische Reich betrachtet. Die Karte gibt einen Überblick der zugehörgen Gebiete von 1300 bis 1923. Zum einen können die anzuzueigenden Jahre in einem Menü ausgewählt und angeklickert werden, zum anderen ist auch eine durchlaufende Animation der Gebiete nacheinander anwählbar. Zudem kann der Strich der Gebiete ein- und ausgeschaltet werden.

Kann ein Darstellungsprogramm Animationen nicht umsetzen, sind Strich und Füllung aller Jahre sichtbar und die Füllung teiltransparent überlagert.

Als Vorlage wurde eine bereits verfügbare GIF-Animation verwendet. Die Vorteile der interaktiven Karte mit SVG liegen darin, dass sie leicht mit einem Texteditor an andere Sprachen anzupassen ist. Hier wurden im Menü gleich mehrere Sprachen zur alternativen Anzeige bereitgestellt, die allgemeine Beschreibung ist in Deutsch und Englisch verfügbar – andere Sprachen sind im Bedarfsfalle leicht zu ergänzen. Auch die Animationen sind bei Bedarf leicht anpassbar.

Die Vorteile für den Betrachter liegen in der freien Skalierbarkeit der Karte und dem freien Zugriff auf die Gebiete der Einzeljahre sowie der Möglichkeit des Vergleiches. Durch die Interaktion ist die Beschäftigung des Betrachters mit dem Thema zudem intensiver, es wird sozusagen besser begreiflich als eine schlichte durchlaufende GIF-Animation, welche nur passiv ohne Eingriffsmöglichkeit rezipiert werden kann.

Auch die Historie der GIF-Animation ist dramatisch. Die eigentlich zugrundeliegende Länderkarte war bereits SVG, ist dann aber offenbar nach JPEG/JFIF konvertiert worden, um die historischen Gebiete zu ergänzen. Von vornherein bei SVG zu bleiben, wäre hier zweifellos die bessere Wahl gewesen. Selbst die Verwendung von PNG statt JPEG/JFIF bei der Bearbeitung hätte geholfen, eigenartige Artefakte zu vermeiden, die im GIF noch auszumachen sind. Diese letztlich unnötigen Formatkonversionen führen dann auch zu Genauigkeitseinbußen. Allerdings wird für das eigentliche Thema keine sehr hohe Präzision benötigt, so dass die Genauigkeit der interaktiven SVG-Karte immer noch gut genug für den Zweck sein sollte.

Abrollen eines Rades

Abrollen auf einer ebenen Unterlage

Um das Abrollen eines Kreises oder Rades auf einem Weg darzustellen (dessen Krümmungsradius überall kleiner als der Radius des Kreises ist, kann man recht einfach zwei Bewegungen überlagern, einmal die Drehung des Rades um die eigene Achse und dann die Bewegung entlang des Weges. Ist r der Radius des Rades zum Berühungspunkt mit dem Weg, so ist der Umfang U = 2 π r. Die Zeit für eine komplette Drehung muß nun genauso groß wie die Translation um U entlang des Weges sein, damit der Eindruck des Abrollens entsteht.

Ist der Weg gerade, so ist dies recht einfach zu realisieren, wie im ersten Beispiel zu sehen. Bei diesem wird einfach eine by-Animation für die Translation verwendet, wobei als Wert der dreifache Umfang des Kreises verwendet wird und auch die dreifache Animationsdauer. Die Animation wird wiederholt. Durch eine negative Anfangszeit startet das Rad im sichtbaren Bereich.

Abrollen in und auf einem Kreis

Rollt das Rad in oder auf einem Kreis ab, so ist dies offenbar rein mit Drehungen realisierbar, wobei das Verhältnis der Radien die Animationsdauern bestimmt. Je nachdem, ob das Rad innen oder außen rollt, ändert sich auch das Vorzeichen der Drehung des Rades relativ zur Richtung der Rolldrehung. Die beiden Räder rollen gegenläufig um, eines innen, eines außen.

Abrollen entlang eines Pfades

Auch das Abrollen entlang eines beliebigen Pfades ist möglich. Zu dem Zwecke wird dann zum einen 'animateMotion' verwendet, zum anderen sollte die Länge des Pfades bekannt sein, um die Animationsdauer für die Bewegung entlang des Pfades relativ zur Drehung des Rades korrekt angeben zu können. Man kann die Länge des Pfades relativ einfach und genau schätzen, indem man sich mit stroke-dasharray einen Maßstab bastelt.

Über das Verhältnis der Pfadlänge zum Radumfang ergibt sich dann wieder das Verhältnis der Animationsdauern. Die Laufrichtung wird natürlich durch den gewählten Pfad bestimmt. Auf welcher Seite das Rad rollt, bestimmt sich durch rotate 'auto' oder 'auto-reverse'.

Bei der Bestimmung des Kreisumfanges ist wie gesagt der Radius vom Kreismittelpunkt zum Pfad relevant. Punkte außerhalb des Radius führen dann gegebenenfalls eine rückläufige Schleife aus. Ganz praktisch kommt das etwa bei Eisenbahnrädern vor, die auf Schienen laufen.