9.8Animationsmöglichkeiten

Nachdem nun alle wichtigen Grundvoraussetzungen für Animationen vorgestellt wurden, können nun endlich die fünf in SVG existierenden Animationsgruppen im einzelnen behandelt werden. Die Anwendungsgebiete der Animationstypen überschneiden sich zwar recht häufig, dennoch hat jeder Typ seine Daseinsberechtigung. Zum einen kann man mit den spezialisierten Elementen meistens leichter arbeiten, zum anderen erhöhen sie die Verständlichkeit des Codes.

Angegeben werden die Animationselemente im übrigen immer als Subelement des eigentlichen Objekts, das man animieren möchte.

9.8.1<animate>

Mit dem Element <animate>, das in den vorherigen Kapiteln schon des öfteren erwähnt und verwendet wurde, kann man beinahe jedes der als animierbar gekennzeichneten Attribute animieren. Pfadanimationen können damit jedoch nicht erstellt werden. Es wird häufig eingesetzt, um interpolierbare Eigenschaften, wie etwa Koordinaten, Längen, Breiten oder Farben, zu animieren. Es ist allerdings auch möglich, Werte zu ändern, die nur einzelne Zustände besitzen. Dafür eignet sich das <set>-Element jedoch meist besser.

 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">
  <ellipse cx="140" cy="100" rx="120" ry="70" fill="green">
    <animate attributeName="rx" from="120" to="70" begin="0s" dur="2s" fill="freeze" />
  </ellipse>
</svg>

9.8.2<animateColor>

Man kann zwar auch mit Hilfe des <animate>-Tags Farbtransformationen durchführen, jedoch wurde hierfür explizit das <animateColor>-Element geschaffen.

 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">
  <ellipse cx="140" cy="100" rx="120" ry="70" fill="green">
    <animateColor attributeName="fill" from="green" to="gold" begin="0s" dur="2s"
      fill="freeze" />
  </ellipse>
</svg>

9.8.3<animateTransform>

Um Transformationen animiert durchführen zu können, benötigt man den Animationstyp <animateTransform>. Alles, was im Kapitel  Transformationen gesagt wurde, gilt auch hier. Der Name des zu veränderten Attributs muß grundsätzlich transform lauten. Damit dem Animationselement auch bekannt ist, welche Transformation durchgeführt werden soll, muß man dem Element den Transformationstyp mit Hilfe des Attributs type mitteilen. type kann mit diesen Werten gefüllt werden:

• translate - Translation
• scale - Skalierung
• rotate - Rotation
• skewX - horizontale Verzerrung
• skewY - vertikale Verzerrung

Außerdem muß darauf geachtet werden, daß die Werte der Zustände das gleiche Format haben wie die Parameter der Transformationsbefehle. Möchte man beispielsweise eine Skalierung animieren, so benötigt man etwa für ein to-Attribut den folgenden Code: to="sx [sy]". Analog sieht es bei den andere Transformationen aus.

 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">
  <ellipse cx="140" cy="100" rx="120" ry="70" fill="green">
    <animateTransform attributeName="transform" type="scale" from="1" to=".25"
      begin="0s" dur="2s" fill="freeze" />
  </ellipse>
</svg>

9.8.4<animateMotion>

Um Objekte entlang eines vordefinierten Pfades laufen zu lassen, benötigt man das <animateMotion>-Element. Der Animationspfad wird entweder als <path>-Objekt im Definitionsabschnitt abgelegt und mit Hilfe des <mpath>-Elements referenziert oder er wird direkt mit Hilfe des Attributs path im <animateMotion>-Tag angegeben.  Listing 9-11 zeigt dabei die erste,  Listing 9-12 die zweite Möglichkeit.

 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"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="pfad" d="M0 0 C100 200 100 0 200 0" />
  </defs>
  <ellipse cx="140" cy="100" rx="120" ry="70" fill="green">
    <animateMotion begin="0s" dur="2s" fill="freeze">
      <mpath xlink:href="#pfad" />
    </animateMotion>
  </ellipse>
</svg>

 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">
  <ellipse cx="140" cy="100" rx="120" ry="70" fill="green">
    <animateMotion path="M0 0 C100 200 100 0 200 0" begin="0s" dur="2s" fill="freeze" />
  </ellipse>
</svg>

Das <animateMotion>-Tag besitzt eine weitere interessante Eigenschaft, mit der sich die Ausrichtung des animierten Objekts beeinflussen läßt. Das Attribut nennt sich rotate und kann beliebige Winkel oder die Werte auto und auto-reverse annehmen. Mit dieser Eigenschaft ist es ein Leichtes eine Animation zu konstruieren, die einen Pfeil bewegt, der immer in Richtung des Pfades ausgerichtet ist.

9.8.5<set>

Mit dem Element <set> kann man nicht wie mit den anderen Animationstypen durch Interpolation flüssige Animationen erstellen. <set> schaltet im grunde genommen nur zwischen einem Anfangs- und einem Endzustand um.

Beim <set>-Tag muß übrigens das Attribut fill nicht auf freeze gesetzt werden, um den letzten Zustand beizubehalten. Dafür sorgt das Element automatisch. Des weiteren muß auch kein Anfangszustand mit from festgelegt werden, da das <set>-Element als Anfangszustand immer den Anfangswert des angesprochenen Attributs benutzt.

 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">
  <ellipse cx="140" cy="100" rx="120" ry="70" style="fill:green;stroke:black;stroke-width:0;">
    <set attributeName="stroke-width" to="10" begin="1s" />
  </ellipse>
</svg>