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:

PLAIN TEXT
XML:
  1. <fx:Declarations>
  2.           <s:Animate id="myTween" target="{myRect}">
  3.             <!-- Motion path ... -->
  4.           </s:Animate>
  5. </fx: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.

PLAIN TEXT
XML:
  1. <s:MotionPath property="width">
  2.     <s:KeyFrame time="300" value="200" />
  3.     <s:KeyFrame time="600" value="20" />   
  4.     <s:KeyFrame time="700" value="100" />   
  5.  </s:MotionPath>

Quellcode

Der komplette Quellcode des oben gezeigten Beispiels lautet:

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application
  3.    xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.    xmlns:s="library://ns.adobe.com/flex/spark"
  5.    xmlns:mx="library://ns.adobe.com/flex/halo">
  6.      
  7.    <fx:Declarations>
  8.    
  9.       <s:Animate id="myTween" target="{myRect}">
  10.          <s:MotionPath property="width">
  11.              <s:KeyFrame time="300" value="200" />
  12.              <s:KeyFrame time="600" value="20" />   
  13.              <s:KeyFrame time="700" value="100" />   
  14.           </s:MotionPath>
  15.          
  16.          <s:MotionPath property="rotation">
  17.              <s:KeyFrame time="1000" value="0" />           
  18.              <s:KeyFrame time="1500" value="360" />           
  19.           </s:MotionPath>   
  20.          
  21.          <s:MotionPath property="x">
  22.              <s:KeyFrame time="50" value="400" />           
  23.              <s:KeyFrame time="2000" value="150" />           
  24.           </s:MotionPath>           
  25.                
  26.       </s:Animate>
  27.      
  28.    </fx:Declarations>
  29.    
  30.    <s:Button
  31.       id="myButton"
  32.       label="Animation starten"
  33.       click="myTween.play()"
  34.       width="150" height="30"/>
  35.      
  36.      
  37.     <s:Rect id="myRect" width="100" height="100" x="150" radiusX="10" radiusY="10">
  38.             <s:fill>
  39.                 <s:SolidColor color="0xE3004E" />
  40.             </s:fill>
  41.         </s:Rect>       
  42.    
  43. </s:Application>

Mehr zu Flex 4: „Gumbo-Wochen” auf www.video-flash.de