<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type"
  content="application/xhtml+xml; charset=iso-8859-1" />
  <title>Graphik und SMIL-Animation</title>
  <meta name="generator" content="amaya 8.6, see http://www.w3.org/Amaya/" />
  <link href="../style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<table border="0" width="100%" summary="toc">
  <tbody>
    <tr>
      <td><img alt="W3C" src="../../images/w3c_home" /> <img alt="Amaya"
        src="../../images/amaya.gif" /></td>
      <td><p align="right"><a href="SVGLibrary.html.de" accesskey="p"><img
        alt="previous" src="../../images/left.gif" /></a> <a
        href="../SVG.html.de" accesskey="t"><img alt="top"
        src="../../images/up.gif" /></a></p>
      </td>
    </tr>
  </tbody>
</table>

<div id="page_body">
<h1>Grafik und SMIL-Animation</h1>

<p>In SVG werden Animationen als Elemente innerhalb der Struktur, die die
Organisation der Graphik beschreibt, dargestellt. Animationselemente
erscheinen als Kinder der animierten Graphikelemente. Um das Fokussieren auf
eine Animation zu ermöglichen, werden alle Animationselemente in einer
Zeitleistenansicht anzeigt und entsprechend der animierten Graphikelemente
zusammengruppiert.</p>

<h2>Die Zeitleistenansicht</h2>

<p>Die Zeitleistenansicht zeigt Animationen an, die mit Grafikobjekten
assoziiert sind. Jedes animirte Objekt des Dokumentes wird dort dargestellt,
mit einer graphischen Darstellung seiner Animationselemente.</p>

<p>Die folgende Abbildung zeigt die drei animierten Objekte eines Dokumentes.
Jedes Objekt wird auf der linken Seite der Ansicht durch ein Label mit weißem
Hintergrund und einem Kasten neben dem Label dargestellt. Durch Anklicken des
Labels wird das entsprechende Element in der formatierten Ansicht
hervorgehoben und zeigt so den Kontext dieses Elements an. Wenn das
Graphikelement ein einzelnes Animationselement hat (wie das Element Rectangle
in der Abbildung), wird dieses Animationselement als farbiger Balken
angezeigt. Wenn es mehrere Elemente gibt, wird die gesamte Animation durch
einen einzelnen grauen Balken dargestellt (Circle, am unteren Rand der
Abbildung), und mit dem '+' Button kann der Benutzer auf eine erweiterte
Darstellung umschalten. Das Element MyText ist ein Beispiel einer solchen
erweiterten Darstellung, in der jedes Animationselement durch einen farbigen
Balken dargestellt wird. Mit dem Button '-' gelangt der Benutzer zurück zu
der komprimierten Darstellung.</p>

<p>Die Position einer Animation auf der Zeitachse hängt von ihrem Start- und
Endzeitpunkt ab, und die Farbe des Balkens gibt die Art der Animation
wieder:</p>
<ul>
  <li>gelb für <code>animate</code>,</li>
  <li>rot für <code>set</code>,</li>
  <li>grün für <code>animateMotion</code>,</li>
  <li>dunkelblau für <code>animateColor</code>,</li>
  <li>hellblau für <code>animateTransform</code>.</li>
</ul>

<p class="figure"><img alt="Animation view"
src="//home/vatton/Amaya/doc/images/timeline_view.png" /></p>
</div>

<h2>Bearbeiten von Animationen</h2>

<p>Die Zeitleistenansicht ist nützlich, um sich schnell einen Überblick über
die Animationen aller Graphiken in einem Dokument zu verschaffen, aber sie
erlaubt es auch, Animationen zu bearbeiten. Vorhandene Elemente können
geändert werden. Die meisten Änderungen erfolgen direkt auf der Zeitleiste,
wie das Verschieben eines Balkens oder das Ändern seiner Länge. Bei
Änderungen dieser Art werden in anderen Ansichten die entsprechenden
Attribute des Animationselements sofort aktualisiert (in diesem Beispiel die
Attribute <code>begin</code> und <code>dur</code>).</p>

<p>Eine Bewegung für ein existierendes Grafikelement kann man wie folgt
erzeugen:</p>
<ul>
  <li>Festlegen der Startzeit der Animation:
    <p>Dazu klickt man bei gedrückter Ctrl-Taste mit der linken Maustaste auf
    den roten Zeitleistenschieber und verschiebt ihn in die richtige
    Anfangsposition.</p>
  </li>
  <li>Auswahl des gewünschten Elements in der formatierten Ansicht:
    <p>Das Element sollte eine ID besitzen. Diese ID wird als Label für das
    Element angezeigt.</p>
  </li>
  <li>Erzeugen eines neuen Animationselements in der Zeitleistenansicht:
    <p>Dazu klickt man den oberen linken <img alt="anim_motion"
    src="/amaya/anim_motion_sh_db.png" /> Button in der Zeitleistenansicht
    an.</p>
  </li>
  <li>Markieren der Start- und Zielposition der Bewegung in der formatierten
    Ansicht:
    <p>Dazu klickt man bei gedrückter Ctrl-Taste mit der linken Maustaste auf
    das angezeigte <img alt="cross" src="../../../amaya/timeline_cross.gif"
    /> Icon in der formatierten Ansicht. Damit kann man die
    Schlüsselpositionen des animierten Elements im Kontext der anderen
    Graphikelemente steuern. Man zeichnet nun einfach den Pfad der
    Bewegung.</p>
  </li>
  <li>Abschließend kann man in der Zeitleistenansicht den neuen Balken
    verschieben und/oder seine Größe ändern, um den Zeitablauf zu
  justieren.</li>
</ul>

<p>Das Einstellen des Zeitablaufs ist in der Zeitleistenansicht bequemer,
weil dort die Synchronisierung eines Elements mit den anderen animierten
Elementen deutlicher sichtbar ist. Die anderen Ansichten bleiben aber
weiterhin verfügbar, und manche Parameter können in der Strukturansicht durch
Bearbeiten von Attributen eingestellt werden, sowie falls notwendig im
Quelltext.</p>

<p>Eine Farbenänderung für ein existierendes Graphikelement kann man wie
folgt erzeugen:</p>
<ul>
  <li>zuerst das gewünschte Element in der Hauptansicht auswählen,</li>
  <li>dann den oberen linken <img alt="anim_color"
    src="/amaya/anim_color_sh_db.png" /> Button anklicken.</li>
</ul>

<p>Ein Balken, der eine Animation darstellt, kann genauso manipuliert werden
wie ein Rechteck im Dokument. Für die Zeitleistenansicht gibt es allerdings
ein paar Einschränkungen. Zum Beispiel können farbige Balken nur horizontal
entlang der Zeitleiste bewegt werden, und ihre Höhe kann nicht einzeln
geändert werden. Diese Einschränkungen ergeben sich aus der Semantik der
timeline graphic language.</p>
</body>
</html>
