from
Voreinstellung: keine.
Mit diesem Attribut legen Sie den Startwert für die Eigenschaft
des animierten Elements fest.
Akzeptierte Werte sind abhängig von der entsprechenden Eigenschaft.
to
Voreinstellung: keine.
Mit diesem Attribut legen Sie den Endwert für die Eigenschaft
des animierten Elements fest.
Akzeptierte Werte sind abhängig von der entsprechenden Eigenschaft.
by
Voreinstellung: keine.
Mit diesem Attribut können Sie bei numerischen Eigenschaften
einen additiven Endwert angeben.
Der im Attribut by verwendete Wert wird mit
dem im Attribut from festgelegten Wert
addiert (from-Wert + by-Wert = to-wert).
by darf nicht mit dem Attribut
to gemeinsam verwendet
werden, da es in diesem Falle ignoriert wird.
values
Voreinstellung: keine.
Durch Verwendung des Attributs
values können Sie beginnned mit dem Startwert
und abschließend mit dem Endwert,
eine Liste von Zwischenwerten angeben, die
bei der Berechnung der Animation berücksichtigt werden. Alle Werte werden untereinander
durch Semikolon getrennt und sind in ihrer Art abhängig von der animierten Eigenschaft.
In den meisten Fällen sind es Längenangaben.
Verwenden Sie values anstelle der Attribute
from, to und
by. Bei gleichzeitiger Verwendung werden die Angaben
von values interpretiert, wogegen die anderen
Angaben nicht beachtet werden.
Um zusätzlich auch die Zeitsequenzen zwischen den einzelnen Übergangswerten
festzulegen, können Sie das Attribut keyTimes verwenden.
calcMode
Voreinstellung: linear.
Ausnahme! Voreinstellung für das Element animateMotion:
paced.
Durch das Attribut calcMode können Sie die
Art und Weise, wie der user agent die Animation berechnen soll, einstellen.
Dazu können Sie 4 Werte verwenden:
- Die Verwendung des voreingestellten Wertes linear führt dazu, dass der zeitliche Übergang zwischen den einzelnen Werten gleichmäßig lang ist,
und daher der Übergang fließend dargestellt wird.
- Der Wert discrete bewirkt eine ähnliche Berechnung der Animation mit dem Unterschied, dass der Übergang sprunghaft dargestellt wird.
- Durch den Wert paced erreichen Sie, dass die Veränderung zwischen den Werten gleichmäßig berechnet wird, dadurch ist unter Umständen der zeitliche Übergang zwischen den Werten unterschiedlich lang. Der Übergang wird fließend dargestellt.
- Wenn Sie den Wert spline verwenden, findet die Berechnung der Übergänge anhand einer kubischen Bezierkurve statt, die sie mit Hilfe des Attributes keySplines festlegen müssen.
Interressant wird die Verwendung dieses Attributs in Zusammenhang
mit dem Attribut values.
keyTimes
Voreinstellung: keine.
Dieses Attribut ist nur in Zusammenhang
mit der Verwendung von values möglich.
Durch keyTimes können Sie die zeitlichen Übergänge zwischen
den einzelnen Werten durch Angabe von relativen Werten zwischen 0 und 1,
die sich auf die Gesamtabspieldauer der Animation beziehen, festlegen.
Dabei bezieht sich jeder Wert aus der, durch Semikolon getrennten
Liste von relativen Angaben, auf die gleichplatzierten Werte der
Liste von Werten im values-Attribut. Daher muß
die Anzahl der Werte in beiden Attributen übereinstimmen.
keySplines
Voreinstellung: keine.
Dieses Attribut hat nur dann Gültigkeit, wenn zuvor das Attribut
calcMode mit dem Wert
spline verwendet wurde. Hier können Sie die Werte
für die Kontrollpunkte der kubische Bezierkurven eintragen, die zur Berechnung
der Animation zwischen den einzelnen Animationswerten (values) verwendet wird.
Diese Funktionalität ist etwas für ganz besondere Ansprüche, daher verweise ich
für weitere Informationen auf die SVG-Recommendation des W3C.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>animValueAttrs</title>
<desc>Attribute/Eigenschaften für die Werteveränderung
im Zielelement einer Animation</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:12px;
fill:black; text-rendering:optimizeSpeed;}
rect {fill:limegreen; stroke:black;}
line {stroke:black;}
]]>
</style>
</defs>
<!-- kasten 1 -->
<g>
<text x="25" y="36">
kasten 1:
   
from 15 to 565
</text>
<line x1="20" y1="40" x2="580" y2="40" />
</g>
<rect id="kasten1" x="15" y="45" width="20" height="10" />
<animate xlink:href="#kasten1"
attributeName="x"
begin="go.click" dur="10"
from="15" to="565"
restart="whenNotActive"
fill="freeze" />
<!-- kasten 2 -->
<g>
<text x="25" y="76">
kasten 2:
   
from 15 by 550
</text>
<line x1="20" y1="80" x2="580" y2="80" />
</g>
<rect id="kasten2" x="15" y="85" width="20" height="10" />
<animate xlink:href="#kasten2"
attributeName="x"
begin="go.click" dur="10"
from="15" by="550"
restart="whenNotActive"
fill="freeze" />
<!-- kasten 3 -->
<g>
<text x="25" y="116">
kasten 3:
   
values 15;565;15
</text>
<line x1="20" y1="120" x2="580" y2="120" />
</g>
<rect id="kasten3" x="15" y="125" width="20" height="10" />
<animate xlink:href="#kasten3"
attributeName="x"
begin="go.click" dur="10"
values="15;565;15"
restart="whenNotActive"
fill="freeze" />
<!-- kasten 4 -->
<g>
<text x="25" y="156">
kasten 4:
   
values 15;565;15 keyTimes 0;.8;1
</text>
<line x1="20" y1="160" x2="580" y2="160" />
</g>
<rect id="kasten4" x="15" y="165" width="20" height="10" />
<animate xlink:href="#kasten4"
attributeName="x"
begin="go.click" dur="10"
values="15;565;15"
keyTimes="0;.8;1"
restart="whenNotActive"
fill="freeze" />
<!-- kasten 5 -->
<g>
<text x="25" y="196">
kasten 5:
   
values 15;165;505;565;505;165;15
calcMode discrete
</text>
<line x1="20" y1="200" x2="580" y2="200" />
</g>
<rect id="kasten5" x="15" y="205" width="20" height="10" />
<animate xlink:href="#kasten5"
attributeName="x"
begin="go.click" dur="10"
values="15;165;505;565;505;165;15"
calcMode="discrete"
restart="whenNotActive"
fill="freeze" />
<!-- START/RESTART-Button -->
<g id="go">
<rect x="15" y="255" width="60" height="20" />
<text id="rs" x="18" y="270"
opacity="0">
RESTART
</text>
<text id="s" x="27" y="270">
START
</text>
</g>
<animate xlink:href="#s"
attributeName="opacity"
begin="go.click" dur="10"
values="1;.9;.1;0"
keyTimes="0;.4;.6;1"
restart="never"
fill="freeze" />
<animate xlink:href="#rs"
attributeName="opacity"
begin="go.click" dur="10"
values="0;.1;.9;1"
keyTimes="0;.4;.6;1"
restart="never"
fill="freeze" />
</svg>
Die 6 Animationen im obigen Beispiel verdeutlichen den Gebrauch der
Attribute by, values,
keyTimes und calcMode.
Alle Animationen werden durch das Event click auf das
Objekt "go",
den START/RESTART Button, ausgelöst und haben jeweils eine Gesamtspieldauer von
10 Sekunden, was mittels des Attributs dur definiert ist.
Die Animation der Kästen kann
nach Beendigung erneut gestartet werden, die Animation des Button
kann nicht wieder gestartet werden (außer nach einem erneuten Laden der
Seite). Hierfür ist die Verwendung von
restart mit den Werten whenNotActive
bzw. never verantwortlich.
Durch Verwendung des speziellen Attributes fill und
dem Wert freeze, ist für alle Animationen das letzte Bild der
Animation als Endbild festgelegt.
Die Animation kasten 1 erhält den absoluten Startwert (15) durch die
Verwendung von begin und
ihren absoluten Endwert (565) durch das Attribut to.
Die Animation kasten 2 erhält den absoluten Startwert (15) ebenfalls durch
begin, der Endwert wird jedoch
durch die Verwendung von by
festgelegt.
Der für by angegebene Wert (550) wird relativ zum
Startwert interpretiert. Das bedeutet, dass dieser Wert zum Startwert addiert
wird und auf diese Art den absoluten Endpunkt bestimmt:
(Startwert) 15 + (by-Wert) 550 = (Endwert) 565
Für die Animation kasten 3 wird das Attribut values
verwendet, um die Werte für die Zieleigenschaft festzulegen.
Mit diesem Attribut ist es möglich, mehrere Werte anzugeben. Dabei ist
der erste Wert, der durch Semikolon getrennten Liste, der Startwert (15)
und der letzte Wert der Liste der Endwert (15). Dazwischen können beliebig
viele Zwischenwerte angegeben werden. In diesem Beispiel ist es
allerdings nur einer (565). So ist es möglich den
Kasten an der Linie hin und her wanderen zu lassen.
Die Animation kasten 4 ist bis auf die zusätzliche Verwendung
des Attributs keyTimes mit der Animation
kasten 3 identisch.
Das Attribut keyTimes hat als Wert eine
Liste von relativen Werten,
die sich auf die Gesamtabspieldauer (10 Sekunden) der Animation beziehen. Daher
werden die einzelnen Werte entweder von 0 bis 1 oder von 0% bis 100%
angegeben.
Die Anzahl der Werte muß mit der Anzahl der Werte von
values übereinstimmen, da sich jeder einzelne Wert von
keyTimes auf den gleichplatzierten
Wert von values bezieht.
Im Beispiel ist dem Attribut
values eine Liste von 3 Werten (15;565;15)
zugeordnet, daher hat auch das Attribut
keyTimes 3 Werte in der seiner Liste (0;.8;1).
Der erste Wert dieser Liste ist immer die Startzeit 0
(Beginn der Gesamtspieldauer), der letzte Wert
dieser Liste immer der Endwert 1 (Ende der Gesamtspieldauer).
Der Wert oder die Werte dazwischen gibt/geben eine relative Zeitdauer an.
In unserem Beispiel ist es nur ein Wert (.8 oder 80%).
Die Animation beginnt also bei 0 Sekunden: der Kasten befindet sich auf der
x-Koordinate (15). Nach 8 Zehnteln oder 80% der Gesamtzeit,
also nach 8 Sekunden,
hat der Kasten die Koordinate (565) erreicht. In der restlichen Zeit, also
den letzten 2 Sekunden, bewegt sich der Kasten wieder zum Endpunkt der
Animation hin (15), den er am Ende der Animation erreicht hat.
Die Animation kasten 5 zeigt die Verwendung von calcMode
und dem Wert discrete. Die in
values angegebenen Werte werden
nicht fließend, sondern sprunghaft erreicht. Der Kasten hüpft
von Wert zu Wert.
Die letzte Animation go ändert die Button-Beschriftung
nur beim ersten click.
Dazu wird die Eigenschaft opacity in zwei Text-Elementen
geändert (von 1 auf 0 und von 0 auf 1). Die Werteveränderung wird
durch values und
keyTimes näher bestimmt.
|