Flex:: オブジェクトをアニメーションさせる方法

Flex 4.10:: Flexにはオブジェクトをアニメーションさせる便利なクラスがたくさんあります。これらのクラスを使用すると簡単なコーディングでオブジェクトを思うようにアニメーションさせることができ、Richなアプリケーションを作成するにはとても重宝します。
実行方法も簡単で、プロパティなどをセットして、play()メソッドを呼ぶだけです。

■クラス

• Animate
• SimpleMotionPath（移動、サイズを変化させる）
• Move（移動させる）
• Rotate（回転させる）
• Scale（サイズスケールを変化させる）
• Fade（透明度を変化させる）
• AnimateColor（色を変化させる）

■結果

A Flash Content

■ソースコード

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160"> <fx:Declarations> <s:Animate id="aniMoveX" target="{targetObject}"> <s:SimpleMotionPath property="x" valueFrom="0" valueTo="200"/> </s:Animate> <s:Animate id="aniMoveY" target="{targetObject}"> <s:SimpleMotionPath property="y" valueFrom="0" valueTo="200"/> </s:Animate> <s:Animate id="aniChangeWidth" target="{targetObject}"> <s:SimpleMotionPath property="width" valueBy="20"/> </s:Animate> <s:Animate id="aniChangeHeight" target="{targetObject}"> <s:SimpleMotionPath property="height" valueBy="20"/> </s:Animate> <s:Animate id="aniMoveAndChange" target="{targetObject}"> <s:SimpleMotionPath property="x" valueFrom="0" valueTo="200"/> <s:SimpleMotionPath property="y" valueFrom="0" valueTo="200"/> <s:SimpleMotionPath property="width" valueFrom="50" valueTo="200"/> </s:Animate> <s:Move id="aniMove" target="{targetObject}" xFrom="0" xTo="200" yFrom="0" yTo="200" autoCenterTransform="true"/> <s:Rotate id="aniRotate" target="{targetObject}" angleTo="0" angleFrom="360" autoCenterTransform="true"/> <s:Scale id="aniScaleUp" target="{targetObject}" scaleXBy="2" scaleYBy="2"/> <s:Scale id="aniScaleDown" target="{targetObject}" scaleXBy="-2" scaleYBy="-2"/> <s:Fade id="aniFadeOut" target="{targetObject}" alphaTo="0" duration="1000"/> <s:Fade id="aniFadeIn" target="{targetObject}" alphaTo="1" duration="1000"/> <s:AnimateColor id="aniColorRed" target="{solidColor}" colorTo="0xFF0000" duration="1000"/> <s:AnimateColor id="aniColorBlack" target="{solidColor}" colorTo="0x000000" duration="1000"/> </fx:Declarations> <s:VGroup> <s:HGroup> <s:Button id="btnMoveX" label="Move X" click="aniMoveX.play()"/> <s:Button id="btnMoveY" label="Move Y" click="aniMoveY.play()"/> <s:Button id="btnChangeWidth" label="Change Width" click="aniChangeWidth.play()"/> <s:Button id="btnChangeHeight" label="Change Height" click="aniChangeHeight.play()"/> <s:Button id="btnMoveAndChange" label="Move Change" click="aniMoveAndChange.play()"/> </s:HGroup> <s:HGroup> <s:Button id="btnMove" label="Move" click="aniMove.play()"/> <s:Button id="btnRotate" label="Rotate" click="aniRotate.play()"/> <s:Button id="btnScaleUp" label="Scale Up" click="aniScaleUp.play()"/> <s:Button id="btnScaleDown" label="Scale Down" click="aniScaleDown.play()"/> <s:Button id="btnFadeOut" label="Fade Out" click="aniFadeOut.play()"/> <s:Button id="btnFadeIn" label="Fade In" click="aniFadeIn.play()"/> </s:HGroup> <s:HGroup> <s:Button id="btnColorRed" label="Red" click="aniColorRed.play()"/> <s:Button id="btnColorBlack" label="Black" click="aniColorBlack.play()"/> </s:HGroup> </s:VGroup> <s:Rect id="targetObject" x="200" y="200" width="50" height="50"> <s:fill> <s:SolidColor id="solidColor" color="0x000000"/> </s:fill> </s:Rect> </s:Application>

http://www.adobe.com/devnet/flex/articles/flex4_effects_pt1.html