XML » SVG Presenter - Carto:net

XML » SVG PRESENTER | STRUKTURIERTE MULTIMEDIA-PRÄSENTATION IM WEB 182
Der in [Listing 6.5.2.1.1] dargestellte SVG-Code würde beispielsweise die rx-Eigenschaft (also den Radius
zur X-Achse)
der übergeordneten Ellipse in einem Zeitrahmen von 6 Sekunden (Zeitversatz: 3 Sekunden)
vom Startwert 48º zeitkontinuierlich dem Zielwert annähern.
Weitaus komplizierter gerät dieser Sachverhalt jedoch, wenn verschiedene
Attribute ein- und desselben Objekts
parallel verändert werden müssen: So erfordert etwa die einfache „Vergrößerung“ eines Objektes wie
etwa in [Abb.6.5.2.1.1] die zeitgleiche Manipulation gleich 4 verschiedener Eigenschaften des Elements: So
muss sowohl die Breite und die Höhe des Objekts entsprechend des angegebenen Skalierungsfaktors geändert,
wie auch das Objekt in x- und y-Richtung verschoben werden, damit es „zentriert“ bleibt und nicht
einfach nach „rechts-unten“ skaliert wird:
Abb. 6.5.2.1.1: „Zoom“-
Funktion eines Bildsymbols
bei gleichzeitiger
Manipulation der x-,
y-, height- und width-
Attribute
Da dies, wie bereits
eingangs ausgeführt,
nicht mehr im Rahmen
der durch S VG
bzw. S MIL direkt bereitgestellten
Syntax
möglich ist, setzt sich das daraufhin für den XML » SVG Presenter entwickelte Animations-Framework aus
zwei maßgeblichen Objekten zusammen: Dem Animations-Objekt ( AniObject),
welches sowohl das zu
animierende Objekt wie auch die bereits erwähnten Animations-Eigenschaften (Animations-Dauer, zu verändernde
Eigenschaft), wie auch einen Animations-Tracker ( AniTracker), der die parallele Animation
mehrerer solcher AniObjects ermöglicht. Der ECMAScript-Sprachumfang stellt hierfür etwa die Befehle
setTimeout und setInterval bereit, mit deren Hilfe nun der AniTracker innerhalb beliebiger Zeitabstände
die entsprechend im Tracker
befindlichen AnimationsObjekte entsprechend ihrem Zielwert annähert.
Ist eine Anim ation demnach abgeschlossen, so wird das entsprechende AniObject aus der Tracker-
Liste gelöscht – ist auch diese leer, so ruft sich der Tracker nicht mehr selbst auf (rekursives Abbruchskriterium)
und stellt seine Aktivitäten ein (so genannter idle-Zustand). Die Skalierungsfunktion aus [Abb.
6.5.2.1.1] lässt sich beispielsweise mithilfe dieser beiden Objekte nun relativ einfach realisieren:
at = new AniTracker(); // Tracker initialisieren
svgObject = evt.getTarget(); // Zu animierendes Objekt ermitteln
...
var newX = getVal(obj, "x") - (oldWidth * (factor-1)) / 2;
var newY = getVal(obj, "y") - (oldHeight * (factor-1)) / 2;
xAni = new AniObject(svgObject, "x", newX, duration);
yAni = new AniObject(svgObject, "y", newY, duration);
widthAni = new AniObject(svgObject, "width", oldWidth * factor, duration);
heightAni = new AniObject(svgObject, "height", oldHeight * factor, duration);
...
at.add(new Array(xAni, yAni, widthAni, heightAni));
if(at.isIdle()) at.track();
Listing 6.5.2.1.2: Skalierungsfunktion mithilfe
von AniObject und AniTracker.
Neben der freilich eher als „Spielerei“ aufzufassenden „Zoom“-Funktion,
die beispielsweise zur Vergrößerung
von Icon-Dateien (im Prototyp momentan etwa eingangs verwendet) dienen könnte, kommt das A-
nimations-Framework im Rahmen der eigentlichen Präsentation etwa bei den optischen „Fades“ (bei Aus-
wahl eines Items wird
die Schrift weiß und der teiltransparente, schwarze Verlaufsbalken langsam eingeblendet)
der Item-Selektion zum Einsatz: