 |
In diesem Artikel wollen wir Ihnen zeigen, wie Animation und Interaktivität in SVG grundsätzlich realisiert werden können. Dieser Artikel soll keine Referenz, sondern ein Kurz-Tutorial sein. Als Basis setzen wir unser SVG-Tutorial voraus.
Animation
Was ist Animation? In erster Linie Bewegung. Sekundär, aber nichtsdestotrotz wichtig, sind Funktionen wie Farbänderungen.
Was ist Animation technisch gesehen? Die Veränderung eines bestimmten Parameters über einen bestimmten Zeitraum. Also z.B. eine Bewegung: wir wollen, dass ein Objekt in 10 Sekunden um 100 Pixel entlang der X-Achse nach rechts verschoben wird. Diese Informationen halten wir in unserer SVG-Quelldatei fest, das Anzeigeprogramm erzeugt daraus eine flüssige Bewegung.
Unser kleines Beispiel sieht in SVG so aus:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<rect x="0" y="0" width="100" height="100" stroke="blue" stroke-width="3px" fill="#000099">
<animate attributeName="x" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="0" to="100" />
</rect>
</svg>
Diesen Code in neuem Fenster anzeigen
Animationen festlegen
Wie Sie sehen, befindet sich der Befehl zur Animation selbst innerhalb des Rechteck-Tags. Das ist eine allgemeine Regel.
Einzelne Attribute animieren
Wer ein einzelnes Attribut wie den X-Wert eines Elements animieren will, verwendet das animate-Tag:
<animate attributeName="x" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="0" to="100" />
attributeName gibt an, welches Attribut verändert werden soll. attributeType bestimmt, was für eine Art Attribut das sein soll, die alternativen Werte sind XML und CSS. Grundregel: alles, was nicht innerhalb irgendwelcher Style-Anweisungen festgelegt wird/würde, ist ein XML-Attribut.
begin und dur legen Anfang und Dauer der Animation fest. Das fill-Attribut sorgt dafür, dass das Ergebnis einer Animation dauerhaft ist, wenn der Wert freeze gesetzt wird. Der Wert remove dagegen würde bewirken, dass das Rechteck nach Ende der Animation wieder an seinen Ausgangspunkt zurückspringt.
Schließlich noch from und to, die sich auf das zu animierende Attribut beziehen: welchen Wert soll es am Anfang bzw. Ende der Animation haben?
Eine Animation lässt sich auch mehrmals hintereinander ausführen. Verwenden Sie dazu das Attribut repeatCount mit einem Zahlenwert bzw. dem Schlüsselwort indefinite für unendlich viele Wiederholungen. Wenn Sie wollen, dass die nächste Wiederholung dort beginnt, wo die letzte aufgehört hat, verwenden Sie die Attribut-/Wertkombination additive="sum" accumulate="sum". Das wird dann als additive bzw. kumulative Animation bezeichnet.
Der folgende Befehl sorgt also für eine Bewegung entlang der X-Achse ins Unendliche:
<animate attributeName="x" attributeType="XML" begin="0s" dur="0.1s" fill="freeze" from="0" to="1" repeatCount="indefinite" additive="sum" accumulate="sum"/>
Pfad-Animationen
Sie können auch Objekte entlang einer bestimmten Strecke animieren. Mehr Informationen dazu im entsprechenden Abschnitt der W3C-Spezifikation.
Ein Attribut zeitweise setzen
Wer ein einzelnes Attribut für einen bestimmten Zeitraum setzen will, verwendet das set-Tag. Nach der angegebenen Dauer springt der Wert wieder zurück, ein kumulatives Verhalten wird hier nicht unterstützt.
Beispiel:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<rect x="0" y="0" width="100" height="100" stroke="blue" stroke-width="3px" fill="#000000">
<set attributeName="fill" attributeType="XML" to="blue" begin="1s" dur="2s">
</rect>
</svg>
Diesen Code in neuem Fenster anzeigen
Farb-Animationen
Wer einen Farbwert animieren will, sollte das Tag animateColor verwenden:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<rect x="0" y="0" width="100" height="100" stroke="blue" stroke-width="3px" fill="#000000">
<animateColor attributeName="fill" attributeType="XML" from="#000000" to="#FF0000" begin="0s" dur="1s" fill="freeze" />
</rect>
</svg>
Diesen Code in neuem Fenster anzeigen
Transformierende Animation
Die transformierende Animation ist sehr mächtig und sehr komplex, daher werden wir hier nicht näher darauf eingehen. Mit folgendem Code kann beispielsweise ein Element gedreht werden:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<rect x="100" y="100" width="100" height="100" stroke="blue" stroke-width="3px" fill="#000000">
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0" to="20"
begin="0s" dur="6s" fill="freeze" />
</rect>
</svg>
Diesen Code in neuem Fenster anzeigen
Zwischen-Fazit
Damit kennen Sie die wesentlichen Techniken, um Animationen in SVG zu erstellen. Interessant werden Animationen meist erst dann, wenn mehrere Elemente gleichzeitig bewegt werden. Ein Beispiel dafür sehen Sie z.B. am Ende unseres SVG-Tutorials.
Interaktion
Interaktion heißt Reaktion auf eine Aktion. In HTML wird das mit JavaScript realisiert, in SVG mit ECMAScript, einer sehr ähnlichen Sprache. Daher ist es vorteilhaft, wenn Sie den DHTML-Abschnitt unseres eBooks gelesen haben. Kenntnisse in JavaScript sind jedenfalls Voraussetzung für das Verständnis der folgenden Abschnitte.
Steigen wir mit einem kleinen Beispiel ein:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<script type="text/ecmascript"><![CDATA[
function clicked(evt) {
var dings = evt.target;
alert("Ich wurde angeklickt und werde jetzt groesser!");
var alteBreite = dings.getAttribute("width")*1;
dings.setAttribute("width", alteBreite+10);
}
]]>
</script>
<rect x="100" y="100" width="100" height="100" stroke="black" stroke-width="2px" fill="silver" onclick="clicked(evt)"/>
<text x="100" y="220" font-family="Verdana" font-size="10" fill="black">
Klick auf das Quadrat!
</text>
</svg>
Diesen Code in neuem Fenster anzeigen
Das Quadrat "reagiert" auf einen Mausklick, indem eine Meldung angezeigt und das Quadrat verbreitert wird.
Einbettung
Um Scripts zu verwenden, definieren Sie einen script-Bereich und in ihm einen CDATA-Abschnitt. Darin können Sie dann z.B. Funktionen definieren.
Events
Wie das Beispiel zeigt, können Events zum Erkennen von Aktionen des Users wie in HTML definiert werden. Unterschied: die Event-Namen müssen klein geschrieben werden, der aufgerufenen Funktion sollte die Event-Variable evt übergeben werden. Beispiele:
onclick="clicked(evt)"
onload="machwas(evt)"
In der aufgerufenen Funktion, im Beispiel clicked, kann man dann so ziemlich alles anstellen, was man möchte. Interessant ist die Möglichkeit, über den Befehl evt.target Zugriff auf das Objekt zu erlangen, das das Ereignis ausgelöst hat (das funktioniert natürlich nur, wenn Sie die Variablen-Namen aus unserem Beispiel übernommen haben).
Zugriff auf Attribute
Die einfachste Möglichkeit, ein Attribut zu verändern, bieten die Methoden getAttribute(Attubut-Name) (zum Auslesen des bisherigen Wertes) und setAttribute(Attribut-Name, neuer Wert) (zum Setzen eines Wertes). Beide funktionieren nur im Zusammenhang mit Objekten, die sich auf die DOM-Struktur der SVG-Datei beziehen, also sozusagen ein Tag aus dem SVG-Quellcode "enthalten".
Tipp: im Beispiel wurde die Rückgabe von getAttribute mit 1 multipliziert, um zu verdeutlichen, dass wir hier mit Zahlen rechnen wollen. Ansonsten hätte der Script-Interpreter die darauf folgende Addition als Verkettung zweier Zeichenketten aufgefasst.
Weitere Zugriffsmöglichkeiten
Bisher kennen wir nur Möglichkeiten, Zugriff auf Objekte zu bekommen, die Ereignisse ausgelöst haben. Es gibt aber noch andere, so beispielsweise die Methode getElementByID, die einen Knoten anhand seines id-Attributs identifiziert:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<script type="text/ecmascript"><![CDATA[
function clicked(evt) {
var document=evt.getTarget.getOwnerDocument();
var q2=document.getElementById("q2");
q2.setAttribute("fill", "red");
}
]]>
</script>
<rect x="100" y="100" width="100" height="100" stroke="black" stroke-width="2px" fill="silver" onclick="clicked(evt)"/>
<text x="100" y="220" font-family="Verdana" font-size="10" fill="black">
Klick auf das obere Quadrat!
</text>
<rect id="q2" x="100" y="250" width="100" height="100" stroke="black" stroke-width="2px" fill="silver" />
</svg>
Diesen Code in neuem Fenster anzeigen
Direkter Veränderung der Baumstruktur
Zum Verständnis des folgenden Abschnitts müssen Sie den DHTML-Abschnitt unseres eBooks gelesen haben oder vergleichbare Kenntnisse besitzen.
Analog zu DHTML stehen auch in SVG Methoden bereit, um die Struktur des Dokumentenbaums zu verändern bzw. die Inhalte einzelner Knoten manuell zu ändern.
Die Methode getFirstChild erlaubt Zugriff auf das erste Kind eines Knotens. setNodeValue setzt den Wert eines Knotens. createTextNode(Text) erzeugt einen Text-Knoten, createElement(element-typ) erzeugt ein Element. appendChild(kind-knoten) schließlich bindet einen Kind-Knoten ein.
Folgendes Beispiel zeigt das: wenn auf das obere Quadrat geklickt wird, erscheint ein zweites Quadrat inklusive zugehörigem Text. Die neu auftauchenden Elemente werden dabei komplett dynamisch erzeugt.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<script type="text/ecmascript"><![CDATA[
function clicked(evt) {
var document=evt.getTarget.getOwnerDocument();
var textnode = document.createTextNode("Du hast es getan!");
var textobject = document.createElement("text");
textobject.setAttribute("x", "100");
textobject.setAttribute( "y", "440");
textobject.setAttribute("fill", "red");
textobject.appendChild(textnode);
document.getFirstChild().appendChild(textobject);
var recobj = document.createElement("rect");
recobj.setAttribute("x", "100");
recobj.setAttribute( "y", "320");
recobj.setAttribute("fill", "green");
recobj.setAttribute("height", "100");
recobj.setAttribute("width", "100");
recobj.setAttribute("stroke", "black");
recobj.setAttribute("stroke-width", "2px");
document.getFirstChild().appendChild(recobj);
}
]]>
</script>
<rect x="100" y="100" width="100" height="100" stroke="black" stroke-width="2px" fill="silver" onclick="clicked(evt)"/>
<text id="textfeld" x="100" y="220" font-family="Verdana" font-size="10" fill="black">
Klick auf das obere Quadrat!
</text>
</svg>
Diesen Code in neuem Fenster anzeigen
Zwischen-Fazit
Sie können nun Interaktivität erzeugen - wenn Baum-Strukturen Sie anfangs verwirren, empfehlen wir, sie auf einem Blatt Papier aufzumalen.
Fazit
Animation und Interaktion - zwei mächtige Werkzeuge, die auch kombiniert werden können. Doch denken Sie an die Fehler vieler Flash-Designer und behalten Sie diesen alten Spruch im Hinterkopf: Weniger ist oft mehr!
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
