9.7Übergangssteuerung
9.7.1Berechnungsmethoden
Animationen in SVG besitzen grundsätzlich einen Startzustand, einen Endzustand und eine Dauer. Die restlichen Zustände errechnet der Viewer automatisch. SVG besitzt dafür vier unterschiedliche Berechnungsmethoden, die dem Betrachter mit Hilfe des Attributs calcMode
mitgeteilt werden können. Dabei handelt es sich um diese Modi:
discrete
linear
paced
spline
In den folgenden Abschnitten werden diese etwas genauer vorgestellt. Zur Veranschaulichung und zum Vergleich der einzelnen Modi untereinander dient in den ersten drei Fällen derselbe Basiscode eines Kreises (siehe Listing 9-6), der während der neun Sekunden andauernden Animation seinen Radius von 10 über 70 bis hin zu 90 Einheiten vergrößert. Da die Animation auf die explizite Angabe von Schlüsselzuständen vezichtet, erhält jeder Zustand exakt drei Sekunden zugewiesen. Die kommenden Beispiele unterscheiden sich einzig und allein in den Werten des
calcMode
-Attributs.
<?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 ="100" cy="100" r="10" fill="blue"> <animate attributeName="r" begin="0s" dur="9s" calcMode="..." values="10; 70; 90" /> </circle> </svg>
calcMode
-Beispiel-Grafik9.7.2Der Modus discrete
Im Modus discrete
findet keine Interpolation zwischen den Zuständen statt. Die Animation verläuft ruckartig, da sich die Zustände schlagartig ändern. Im Beispiel setzt die Animation drei Sekunden nach dem erfolgreichen Laden der Grafik den Radius des Kreises von 10 auf den Wert 70 und nach weiteren drei Sekunden auf den Wert 90. Nochmals drei Sekunden später springt die Animation in ihren Ursprungszustand zurück und der Kreis erhält wieder den ursprünglichen Radius. Es gibt also keine weichen Übergänge zwischen den Zustandsänderungen.
9.7.3Der Modus linear
Der Modus linear
ist dafür verantwortlich, daß zwischen den Schlüsselzuständen eine lineare Interpolation stattfindet. In den Animationselementen <animate>
, <animateColor>
, <animateTransform>
und <set>
ist dieser Modus als Standard gesetzt.
Hier gilt es zu beachten, daß die Zeit, die benötigt wird, um eine Zustandsänderung durchzuführen, immer konstant ist. Im Gegensatz dazu variiert allerdings die Geschwindigkeit.
Die Zustandsänderungen des Kreises im Beispiel sind nun nicht mehr abrupt, sondern verlaufen fließend. Der Viewer hat für jede Änderung exakt drei Sekunden Zeit. Dabei muß er zuerst den Radius um 60 Einheiten, danach nur noch um 20 Einheiten vergrößern. Da er aber dazu jeweils nur drei Sekunden Zeit zur Verfügung hat, muß dementsprechend die Geschwindigkeit der ersten Änderung höher sein als die Geschwindigkeit der zweiten.
9.7.4Der Modus paced
Dieser Modus funktioniert prinzipiell genauso wie der Modus linear
. Allerdings ist hier die Geschwindigkeit der gesamten Animation unveränderlich und die Zeit zwischen den Zuständen variabel. Der Modus paced
ist beim Element <animateMotion>
als Standard gesetzt.
Benutzt man für das Beispiel diesen Modus, so wächst der Radius des Kreises kontinuierlich und mit konstanter Geschwindigkeit innerhalb von neun Sekunden auf den Wert 90 an.
9.7.5Der Modus spline
Im Modus spline
wird eine Animation anhand einer Bézier-Kurve interpoliert. Zur Steuerung der Animation benötigt man also noch die notwendigen Punkte einer solchen Kurve. Diese werden in einer Liste an das Attribut keySplines
übergeben. Die Liste beinhaltet jedoch nur die Kontrollpunkte in der Form x1; y1; x2; y2
. Es handelt sich hierbei aber nicht um absolute Positionsangaben, sondern um relative Werte, die sich zwischen 0 und 1 befinden dürfen. Dabei gehören auch 0 und 1 diesem Intervall an.
Abbildung 9-3 zeigt vier mögliche Bézier-Kurven, die auch für das Beispiel in
Listing 9-7 verwendet wurden. In diesem Beispiel wurden vier fast identische Kreise definiert. Allein die Werte der
keySplines
-Attribute bzw. die Bézier-Kurven unterscheiden sich voneinander und decken sich mit den Kurven aus Abbildung 9-3. Die x-Koordinaten der Kreismittelpunkte wandern innerhalb von acht Sekunden von 0 auf den Wert 200.
Abbildung 9-4 zeigt einen Schnappschuß der Animation nach exakt 4,5 Sekunden. Wegen der unterschiedlichen Interpolationsmethoden bewegen sich die Objekte mit ungleichen Geschwindigkeiten fort. Darum befinden sie sich zum Zeitpunkt t=4,5 auch nicht alle an derselben Stelle.

<?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"> <g style="fill:lightblue;stroke:blue;stroke-width:2px;"> <circle cx="0" cy="50" r="20"> <animate attributeName="cx" begin="0s" dur="8s" calcMode="spline" keySplines="0 0 1 1" values="0; 200" fill="freeze" /> </circle> <circle cx="0" cy="100" r="20"> <animate attributeName="cx" begin="0s" dur="8s" calcMode="spline" keySplines=".5 0 .5 1" values="0; 200" fill="freeze" /> </circle> <circle cx="0" cy="150" r="20"> <animate attributeName="cx" begin="0s" dur="8s" calcMode="spline" keySplines=".0 .75 .25 1" values="0; 200" fill="freeze" /> </circle> <circle cx="0" cy="200" r="20"> <animate attributeName="cx" begin="0s" dur="8s" calcMode="spline" keySplines="1 0 .25 .25" values="0; 200" fill="freeze" /> </circle> </g> <g style="stroke:grey;stroke-width:2px;"> <line x1="20" y1="50" x2="200" y2="50" /> <line x1="20" y1="100" x2="200" y2="100" /> <line x1="20" y1="150" x2="200" y2="150" /> <line x1="20" y1="200" x2="200" y2="200" /> </g> <g style="font-size:8pt;text-anchor:start;fill:black;"> <text x="200" y="60">200</text> <text x="200" y="110">200</text> <text x="200" y="160">200</text> <text x="200" y="210">200</text> <text x="14" y="60">0</text> <text x="14" y="110">0</text> <text x="14" y="160">0</text> <text x="14" y="210">0</text> <text x="2" y="53">a)</text> <text x="2" y="103">b)</text> <text x="2" y="153">c)</text> <text x="2" y="203">d)</text> </g> </svg>
spline
-Modus
Es lassen sich aber nicht nur die Kontrollpunkte der Bézier-Kurve beeinflussen, sondern mit Hilfe des Attributs keyTimes
auch deren Ankerpunkte. Hier dürfen ebenso Werte zwischen 0 und 1 eingesetzt werden.