Neben vorgefertigten Animationsabläufen bietet Flex 4 eine Tween-Engine, die zum Umsetzen von individuellen Animationen gedacht ist. Dazu gibt es die neue Klasse Animation
, wodurch die frühere Tween
-Klasse ausgedient hat.
Das Tweening funktioniert bequem mit MXML-Code (oder natürlich direkt in ActionScript) und erlaubt es, einzelne Keyframes zu setzen.
Zuerst ein kleines Beispiel, das die Tween-Engine in Aktion zeigt. Klickt man auf den Button, wird die Position (x
), die Rotation (rotation
) und die Breite (width
) des Objekts animiert.
Grundgerüst der Animation
Das Grundgerüst einer Animation (myTween
), die auf ein Objekt myRect
angewendet wird, kann in MXML auf folgende Weise definiert werden:
-
:Declarations> -
:Animate id="myTween" target="{myRect}"> -
-
:Animate>
-
:Declarations>
MotionPath und KeyFrame
Um den Verlauf der Animation zu steuern, müssen nun Keyframes festgelegt werden. Keyframes definieren den Wert einer Eigenschaft (z.B. x-Position, Breite, etc.) zum einem bestimmten Zeitpunkt der Animation. Die Werte dazwischen werden von der Tween-Engine interpoliert. Mehrere Keyframes werden zu einem MotionPath
zusammengefasst. Eine Animation kann wiederum mehrere Motion-Pfade haben, wodurch mehrere Eigenschaften gleichzeitig animiert werden können.
Beim folgenden Beispiel wird die Breite des Objekts bei 300ms auf 200% vergrößert, bei 600ms auf 20% verkleinert und zuletzt bei 700ms wieder auf die ursprüngliche Breite skaliert.
-
:MotionPath property="width"> -
:KeyFrame time="300" value="200" /> -
:KeyFrame time="600" value="20" /> -
:KeyFrame time="700" value="100" /> -
:MotionPath>
Quellcode
Der komplette Quellcode des oben gezeigten Beispiels lautet:
-
<?xml version="1.0" encoding="utf-8"?>
-
:Application -
xmlns:fx="http://ns.adobe.com/mxml/2009"
-
xmlns:s="library://ns.adobe.com/flex/spark"
-
xmlns:mx="library://ns.adobe.com/flex/halo">
-
-
:Declarations> -
-
:Animate id="myTween" target="{myRect}"> -
:MotionPath property="width"> -
:KeyFrame time="300" value="200" /> -
:KeyFrame time="600" value="20" /> -
:KeyFrame time="700" value="100" /> -
:MotionPath>
-
-
:MotionPath property="rotation"> -
:KeyFrame time="1000" value="0" /> -
:KeyFrame time="1500" value="360" /> -
:MotionPath>
-
-
:MotionPath property="x"> -
:KeyFrame time="50" value="400" /> -
:KeyFrame time="2000" value="150" /> -
:MotionPath>
-
-
:Animate>
-
-
:Declarations>
-
-
:Button -
id="myButton"
-
label="Animation starten"
-
click="myTween.play()"
-
width="150" height="30"/>
-
-
-
:Rect id="myRect" width="100" height="100" x="150" radiusX="10" radiusY="10"> -
:fill> -
:SolidColor color="0xE3004E" /> -
:fill>
-
:Rect>
-
-
:Application>
Mehr zu Flex 4: „Gumbo-Wochen” auf www.video-flash.de
Schreibe einen Kommentar