Flex:: アニメーション３D編

Flex 4.10:: Flexでアニメーションは簡単にできると以前紹介しました（こちらの記事参照）。今回は３Dのアニメーションを紹介します。これも２Dの時とほぼ同じように実装できます。単純にZ軸が追加されただけです。

■クラス

• Move3D
• Rotate3D
• Scale3D

■結果

■Flash コンテンツ

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

<?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" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ import spark.effects.animation.RepeatBehavior; ]]> </fx:Script> <fx:Declarations> <s:Move3D id="aniMove3D" target="{targetObject}" zBy="1000" repeatCount="2" repeatBehavior="{RepeatBehavior.REVERSE}"/> <s:Rotate3D id="aniRotate3D" target="{targetObject}" angleXFrom="0" angleXTo="360" autoCenterTransform="true"/> </fx:Declarations> <s:HGroup> <s:Button id="btnMove3D" label="Move3D" click="aniMove3D.play()"/> <s:Button id="btnRotate3D" label="Rotate3D" click="aniRotate3D.play()"/> </s:HGroup> <s:Rect id="targetObject" width="50" height="50" x="100" y="100"> <s:filters> <s:DropShadowFilter blurX="10" blurY="10" alpha="0.3" distance="5" angle="45"/> </s:filters> <s:fill> <s:SolidColor color="0x000000"/> </s:fill> </s:Rect> </s:Application>

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