9.4Eigenschaften und Zustände per Animation setzen

9.4.1Eigenschaften setzen

Bekanntlich gibt es in SVG eine sehr große Anzahl an animierbaren Attributen. Um eine dieser Eigenschaften verändern zu können, muß dem Betrachter natürlich erst mitgeteilt werden, um welche Eigenschaft es sich handelt. Dazu wird das Attribut attributeName eingesetzt. Es erhält als Wert den Namen des zu animierenden Attributs.

Viele SVG-Eigenschaften liegen zudem als XML-Attribute (z.B. stroke="blue") und als Stilattribute (z.B. style="stroke:blue") vor. Dieser Unterschied kann dem Viewer mit Hilfe des attributeType-Attributs ebenfalls mitgeteilt werden. Es kann diese Werte annehmen:

• auto - der Betrachter versucht selbst den Typ der zu verändernden Eigenschaft herauszufinden (Standard)
• XML - bei dem Typ der Eigenschaft handelt es sich um ein XML-Attribut
• CSS - bei dem Typ der Eigenschaft handelt es sich um ein CSS-Attribut

Gewöhnlich kann man auf attributeType verzichten, da es standardmäßig auf den Wert auto gesetzt ist und deshalb nur in Sonderfällen die Angabe eines Typs benötigt wird.

Außerdem sei noch erwähnt, daß man mit einer Animation auch nur eine einzige Eigenschaft animieren kann. Sollen also beispielsweise drei Attribute verändert werden, so sind dafür auch drei separate Animationen nötig.

In  Listing 9-1 tauchen neben den eben vorgestellten Attributen ebenso einige der am Anfang diesen Kapitels erwähnten Attribute auf. Die bisher noch unbekannten Attribute from, to und by werden im Anschluß behandelt. Der Quelltext beschreibt einen Kreis, dessen Radius beim Berühren des Kreises mit dem Mauszeiger innerhalb von zwei Sekunden von 50 auf 120 anwächst (erstes <animate>-Tag) und dessen Randfarbe sich im selbem Zeitraum von schwarz nach blau verändert (zweites <animate>-Tag). Die dritte Animation beginnt zwei Sekunden nach dem die erste beendet wurde und verringert den Radius innerhalb einer Sekunde um den Wert 120. Außerdem werden bei allen Animationen die Zustände nach Ablauf der Animation beibehalten (fill="freeze"). Hinzu kommt, daß die Animationen nur ein einziges Mal gestartet und nicht unterbrochen werden können (restart="never").

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="140" cy="140" r="50" fill="blue" style="stroke:black;stroke-width:6px">
    <animate id="radius" attributeName="r" attributeType="XML"
      begin="mouseover" from="50" to="120" dur="2s" fill="freeze" restart="never" />
    <animate attributeName="stroke" attributeType="CSS"
      begin="mouseover" from="black" to="blue" dur="2s" fill="freeze" restart="never" />
    <animate attributeName="r"
      begin="radius.end+2s" by="-120" dur="1s" fill="freeze" restart="never" />
  </circle>
</svg>

9.4.2Zustände setzen

Die eben im vorherigen Kapitel angesprochenen Attribute from und to stellen eine von drei Möglichkeiten dar, wie sich in einer Animation Zustände setzen lassen. Dabei beinhaltet from den Anfangswert und to den Endwert des Attributs. Es ist selbstverständlich darauf zu achten, daß die Werte dem jeweiligen Typ entsprechen, den auch das Attribut verlangt, d.h. bei der Veränderung eines Radius sollte to keinen Farbwert erhalten.

Das Attribut by sorgt ebenfalls für eine Zustandsveränderung. Allerdings ist dessen Wert abhängig vom Ausgangszustand. In  Listing 9-2 wird ein Rechteck mit der Höhe 100 beschrieben. Dessen Höhe soll nach der Animation 200 Einheiten betragen. Deshalb erhält das <animate>-Tag das by-Attribut mit dem Wert 100, der nach Ablauf der Animation zur Ursprungshöhe addiert wurde.

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" height="100" width="200" fill="red">
    <animate attributeName="height" begin="click" by="100" dur="1s" fill="freeze" />
  </rect>
</svg>

Außer diesen Attributen, die im Endeffekt nur Start- oder Endzustände festlegen, gibt es in SVG noch das Attribut values, mit dem sich mehrere Zustände, die sogenannten Schlüsselzustände, setzen lassen. Dabei werden die einzelnen Werte durch Semikola voneinander getrennt in eine Liste geschrieben, die values zugewiesen wird. Dadurch verringert sich zum einen der Schreibaufwand und zum anderen erhöht sich die Übersichtlichkeit.

In SVG lassen sich aber nicht nur die Schlüsselzustände beeinflussen. Auch sogenannten Schlüsselzeiten können den Animationsablauf verändern. Diese werden mit Hilfe des Attributs keyTimes festgelegt. Dabei erhält diese Eigenschaft eine Liste bestehend aus Werten zwischen 0 und 1, die durch Semikola getrennt sind. Dabei muß unbedingt darauf geachtet werden, daß die Anzahl der Werte in der keyTimes-Liste exakt mit der Anzahl der Werte der values-Liste übereinstimmt. Außerdem muß jeder Wert mindestens gleich groß oder größer sein als sein Vorgänger (z.B.: 0; 0.25; 0.8; 1).

Zudem ist die Syntax abhängig vom Interpolationsmodus (siehe  Übergangssteuerung). Benutzt man den linear- oder spline-Modus, müssen der erste Zeitwert in der Liste 0 und der letzte Wert 1 sein. Bei einer diskreten Animation muß nur der erste Zeitwert 0 betragen. Wurde der Interpolationsmodus paced gesetzt, wird das keyTimes-Attribut ignoriert.

Wird auf die Angabe von Schlüsselzeiten verzichtet, so errechnet sie der Viewer, indem er die Dauer der Animation durch die Anzahl ihrer Schlüsselzustände dividiert.