学习目标
1.了解Flex SDK4中特效有了哪些变化。
2. 学会使用它们。
实现步骤
特效在RIA应用中一直有举足轻重的地位，特效可以让程序中界面的变化变得平滑，流畅，甚至绚丽。合理的使用特效可以有效的提升用户体验。Flex 4中的特效有了很多的改变，从官方的描述来看它变得更加的强大以及有效率。
在Flex 3 中，特效只对继承于UIComponent的控件有效，但现在Spark.effects.*包中的特效对所有的对象都有效，包括原有的Halo 控件, 新的Spark 控件, 甚至graphic绘制的图像。Flex 4中的特效都继承于Animate类，Animate继承于Effect类，这样新的特效与Flex3的特效就完全是平行关系 (Flex 3的特效继承于TweenEffect类)，我们移植代码时就可以保留原有的代码不变了。
现在我们来通过一些简单例子展示Flex 4中的特效是如何执行的，在这里我对每个特效的具体属性就不做过多的解释，同学们通过实践以后可以通过Flash Builder 4中的帮助了解更详细的类容。
1. 使用Animate实现简单的特效。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:d="http://ns.adobe.com/fxg/2008/dt"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<s:Animate id="mover" target="{button}" duration="1000">
<s:SimpleMotionPath property="x" valueFrom="0" valueTo="100"/>
<s:SimpleMotionPath property="y" valueTo="100"/>
<s:SimpleMotionPath property="width" valueBy="20"/>
</s:Animate>
</fx:Declarations>
<s:Button id="button" click="mover.play()"/>
</s:Application>
编译运行上面的代码，同学们可以看到按钮的动画效果。熟悉Flex 3 特效的同学可能已经注意到Animate与Flex 3中AnimateProperty的不同，AnimateProperty只能处理一个属性的动画。
使用Animate可以进行一些通用的特效动画，在Flex 4 中还有大量继承于Animate的特效类为同学们封装了很多标准的特效动画，下面我们使用Move与Rotate3D组合做一个按钮的360度旋转加移动。
编译并运行下面的代码
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:d="http://ns.adobe.com/fxg/2008/dt"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<s:Parallel id="transformer" target="{button}">
<s:Move id="move" xFrom="50" xTo="150" autoCenterTransform="true"/>
<s:Rotate3D id="rotate" angleYTo="360" autoCenterTransform="true"/>
</s:Parallel>
</fx:Declarations>
<s:Button id="button" x="50" y="100" label="你好"
click="transformer.play()"/>
</s:Application>
上面的代码让按钮移动了100像素，并且以按钮的中心作为顶点沿Y轴旋转360度，我们使用了Parallel将两个特效打包执行，这也是比较常用的做法，同学们也可以单独对里面的move和rotate执行play()以单独执行他们，同学们也许注意到了这里我使用了中文，熟悉Flex 3的同学可能知道在Flex 3中实现中文的翻转效果是很麻烦的，但现在...试试上面的代码你就知道了:)
下面我继续给大家一些复杂一点的例子。
state的切换是Flex视图转换时比较常用的方法，state切换时加入动画可以让画面切换更加的平滑，自然。下面这个例子展示了Fade特效在state转换时的作用。
<?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/halo">
<s:states>
<s:State name="state1"/>
<s:State name="state2"/>
</s:states>
<s:transitions>
<s:Transition>
<s:Fade targets="{[button0, button1, label2]}"/>
</s:Transition>
</s:transitions>
<s:Button id="button0" label="按钮1" x="100" y="0" visible="true" visible.state2="false"/>
<s:Button id="button1" label="按钮2" x="100" y="50" alpha="0" alpha.state2="1"/>
<mx:Label id="label2" text="标签3" x="100" y="100" includeIn="state2"/>
<s:Button label="Toggle State" click="currentState = (currentState=='state1')?'state2'
:'state1'"/>
</s:Application>
在这个例子中我们从state1切换到state2，这个过程中按钮1在state1时显示，按钮2与标签3在state2时显示。Transition用于在state转换是执行Fade特效。 targets="{[button0, button1, label2]}"表示Fade的对象是这3个对象。 这里又有必要提一下Label控件，Flex3中我们要对Label执行动画效果需要特殊的设置，在 Flex 4中也已经不需要了。
最后一个例子我们来看一个Flex4中新的特效AnimateColor，用于颜色的变化。
<?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/halo">
<s:states>
<s:State name="state1"/>
<s:State name="state2"/>
</s:states>
<s:transitions>
<s:Transition>
<s:AnimateColor target="{center}" duration="150"/>
</s:Transition>
</s:transitions>
<s:Group mouseDown="currentState='state2'" mouseUp="currentState='state1'">
<s:Ellipse x="50" y="50" width="100" height="100">
<s:fill>
<mx:RadialGradient>
<mx:GradientEntry id="center" color="0xf0f0f0" color.state2="0x808080"
ratio="0"/>
<mx:GradientEntry id="edge" color="0x404040"
ratio="1"/>
</mx:RadialGradient>
</s:fill>
</s:Ellipse>
</s:Group>
</s:Application>
对特效的介绍就到这里，同学们可以访问Chet Haase的文章Effects in Adobe Flex 4 SDK beta – Part 1: Basic effects 了解更详细的内容。
总结：
这里只介绍了Flex 4中很少的一部分内容，目的是让同学们从这些例子中学习特效的基本用法，对熟悉Flex3的同学来
说当然不会忘记那令人抓狂的特效用法以及让人更加抓狂的执行效率，在Flex 4中这一切都有了改善，让我们在实际的项目中检验
Flex 4绚丽的特效吧 :)