Attribute über die Zeit verändern | |
<< < > >> | > Hauptteil > Elemente > Animation > Attribute ändern |
2. Hauptteil
2.5 Elemente
2.5.6 Animation
2.5.6.6 Attribute ändern
|
Zuletzt werden die Element vorgestellt, mit Hilfe derer man so ziemlich jede Animation verwirklichen kann. Das Element <animate> ist dazu da, dass man ein Attribut angibt, dessen Wert man über die Zeit verändern will und dazu natürlich die Veränderung des Attributwerts. Im Prinzip kann man damit die anderen Animations-Elemente ersetzen. Hier werden zwei Animationen mit dem gleichen Effekt gezeigt, einmal mit dem <animateTransform>-Tag und einmal mit dem <animate>-Tag: <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1 1" to="2 1"/> <animate attributeName="width" attributeType="XML" from="100" to="200"/> Beide Animationen würden ein Rechteck mit der Breite 100 auf 200 verbreitern. In diesem Fall wäre der zweite Vorschlag aber ungünstiger. Wenn die Breite des Rechtecks geändert werden soll, müssen an mehreren Stellen Änderungen vorgenommen werden. Und falls nicht nur in X-Richtung, sondern auch in Y-Richtung skaliert werden soll, braucht der zweite Vorschlag noch ein zusätzliches <animate>-Tag für das Attribut height. Neben den in diesem Fall doch sehr speziellen Gründen, auf das <animate>-Tag zu verzichten und das jeweilige, speziellere Tag zu benutzen, hat letztere Version meist den Vorteil, übersichtlicher und kürzer zu sein. Aber es gibt noch mehr Attribute, als jene, die in den letzten Kapiteln animiert wurden, und für diese ist <animate> dann auf jeden Fall zuständig. Die Syntax des Elementes lässt sich mit den Vorkenntnissen der letzten Kapitel bereits erraten: über attributeName wird das Attribut benannt, das verändert werden soll, über attributeType der Typ ("CSS" oder "XML"), mit from, to, keyTimes und values können dann die Werte über die Zeit modifiziert werden. Das Beispiel 42 zeigt die Animation zweier Attribute, die bisher noch nicht möglich war: fill-opacity und stroke-opacity. Die einzigen Attribute, die nicht durch <animate> animiert werden können, sind diejenigen, deren Werte nicht-numerisch sind (z.B. visibility), dazu gibt es <set>. Auch hier definiert man das zu verändernde Attribut über attributeName und attributeType, bei dem Festlegen der Werte reicht schon to aus, die restlichen sind aber natürlich auch akzeptiert. Das Nachthimmel-Beispiel wurd nun erweitert um eine aufgehende Sonne, nachdem der Mond verschwunden ist. Hierbei wird auch <set> benutzt, da die Sichtbarkeit der Sonne während der Nachtzeit natürlich "hidden" und während sie aufgeht auf "visible" stehen muss. Noch dazu sind die Bewegung der Sonne und das langsame Verschwinden der Sterne, wobei die opacity auf 0 gesetzt wird. |