Flex 4里的特效1- 基本效果

这篇文章是 Chet Haase 写的，原文在：http://www.adobe.com/devnet/flex/articles/flex4_effects_pt1.html。Chet Haase这哥们原来是sun的工程师，filthy rich clients 是他在swing 特效方面的一本书的网站 （这本书绝对是Swing effect开发的宝典了）。后来跑到Adobe去了，还是作特效方面的工作。最近也出了本Flex特效方面的书《Flex 4 Fun》（我只看了个样章，写得非常详实）。总之这哥们的文章是绝对有含金量的。对Flex graphic感兴趣的人强烈推荐去参观下他的blog。


对图形爱好者来说 ，Flex 特效是Flex平台里最酷也最有趣的部分。有了特效就可以容易地开发出酷的应用，同时增强用户的体验。
在Flex 4里，特效可以应用于任意的对象（不仅是UIComponent）和属性（不仅是数值类型的属性），既可以使用Flash Player的最新技术，从编程的角度也变得更强大和丰富。

Animate是所有特效的基础

Flex4里的所有特效都是Animate类的子类，而Animate是Effect的一个子类。Flex4里的特效类的层次是全新的，与Flex3里的
层次不能兼容，在Flex3里所有的特效类都是TweenEffect的一个子类。这2套特效库可以同时使用，老代码里的特效代码无需修改即可在Flex 4里运行。而Flex 4的开发人员就可以充分利用新的特效功能，这些新特效可用于旧的和新的组件，也可用于新的graphic元素，甚至是任意地对象。

新的Animate类提供了新的特效功能的通用功能，比如使特效能够应用于任意对象和类型的功能。Animate允许你用Animation子类来创建，操作和播放动画效果。Animation类包含了实际运行动画的功能，比如计算和修改动画属性的值。

使用Animate来来创建和使用特效是很简答的：首先要一个目标对象，以及这个对象的某些属性的名字，这些属性会被Animate类
修改来达到动画的效果。还有些可选的参数，比如效果持续的时间。一切都设置好后，调用play（）来播放就是了。

下面的例子中，我们给一个按钮应用了动画效果，动画的内容是把按钮向右移动100个像素。

<s:Animate id="mover" target="{button}"> 
<s:SimpleMotionPath property="x" valueFrom="0" valueTo="100"/> 
</s:Animate> 
<s:Button id="button" click="mover.play()"/>

在这个例子里，我们还可以通过设置valueBy来设置移动的相对值。也可以只设置valueTo属性。当然出来的效果是不一样的。
如果你只设置了valueBy,那每次都是从当前位置再移动一段距离。如果只设置了valueTo，那按第一次后，以后再按就没效果了
。你可以在一个Animate里设置多个SimpleMotionPath来达到同时往不同方向移动的效果。比如下面这段代码：

<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>

使用基本的特效
在上面的例子里，我们很直接地设置了特效需要的属性的名字。当播放特效时，动画效果是通过定时更改目标对象的属性来达到的。
虽然直接用Animate你可以搞出任何你想要的特效，不过Flex 4已经包含了一些常用的特效。比如上面的效用就有对应的Move类可以
完成。大多数情况下，我们用用内置的特效类也就足够了。

上面的例子可以用Move类来改写：

<s:Move id="mover" target="{button}" xTo="100" yTo="200"/>

改过的代码比旧代码紧凑多了。Flex 4里有好多这样基本的特效类。比如Resize，Scale,Rotate,Fade,AnimateColor。
下面就来看看这些特效的是怎么用的。

Resize 特效
Resize特效就是Animate类的一个简单封装，它对目标对象的width和height属性设置from、to和by。下面的例子把
按钮的宽度从当前值设置为100。，高度从当前值设置为50

<s:Resize id="resizer" widthTo="100" heightTo="50" target="{button}"/>

想大多数特效一样，Resize类也有会处理一些例外的情形，比如button设置了它的right属性为0。这时运行
上面的效果会发现按钮是从右边往左边变大的。

变形特效：移动，旋转，伸缩

这几个特效关系紧密，因为它们都影响了目标对象的变换矩阵。它们必须一起工作来保证它们不会提供互相冲突的变换矩阵。

比如，如果你要旋转一个对象，你就改变了它的旋转属性，但同时对象的x，y的位置也可能会被改变（考虑下如果
对象是按它的中心来旋转的，那么它的左上面的坐标就会被改变）。如果你还想给同样一个对象应用Move效果，这2个
效果会保证目标对象能够以可以理解的方式移动和旋转。

在Flex 3里，Move和Rotate效果是完全独立的。大多数情况下，那样也可以正常工作，但是也有可能因为它们互相覆盖彼此的
x和y属性而出现诡异的效果。

在Flex4里，在变换效果之间共享的属性有：

autoCenterTransform：这个标识为true的时候，特效将会围绕目标对象的中心（width/2,height/2）来进行操作。比如，旋转效果会绕着
对象的中心来旋转。伸缩效果会以对象的中心来进行缩放。这个标识对Move效果没有影响，不过需要记住的是，
Move效果是根据对象的中心来移动的，不是根据对象的左上角来移动。

transformX,transformY:如果autoCenterTransform没有设置，特效会使用目标对象的变换中心。如果这些属性同时被设置的话，
它们会互相覆盖。比如默认的变换中心是左上角（x=0,y=0）.如果你把transformX属性设置为50，那么变换的中心就变成了
（50,0).

Repetions 设置：重复相关的属性（repeatCount,repeatDelay,repeatBehavior)等有个要注意的地方：你给第一个特效设置的值
会被应用到后面的所有的效果。因为这个原因，我们不建议在变换效果中设置repetion相关的属性。在AS平台参考文档里，甚至把repetition属性
删除了。不过，如果你在某一时刻只是应用一种效果，那么repetitioin相关的属性是可以放心设置的。

每种效果特有的属性：除了上面这些变换效果都有的属性外，每种变换效果都有自己特定的属性：

Move：Flex 4里的Move效果提供了xFrom,xTo,xBy,yFrom,yTo,yBy等。
Rotate：除了提供了angleFrom,angleTo2个属性。Flex 4里还提东了angleBy属性。这些属性可以让目标对象绕着变换中心来旋转一定的角度。
Scale:这是FLex 4里新提出的效果（Flex 3里有个类似的Zoom效果）。scaleXFrom，scaleXTo,scaleXBy,scaleYFrom,scaleYTo,
scaleYBy等属性指定了对象的伸缩因子。注意这个效果和Resize效果是完全不同的。以上面的Resize按钮的例子为例，
虽然按钮变大了， 但是按钮上面的文字不会改变。而如果是Scale一个按钮的话，不但按钮的大小会变化，它里面的文字也会变化。

下面这个稍微复杂的例子是变换效果的一个组合。

<s:Parallel id="transformer" target="{button}">
 <s:Move xFrom="50" xTo="150" autoCenterTransform="true"/> 
<s:Rotate angleFrom="0" angleTo="90" autoCenterTransform="true"/> 
<s:Scale scaleXFrom="1" scaleXTo="2" autoCenterTransform="true"/> 
</s:Parallel> 
<s:Button id="button" x="50" y="100" label="Transform Me" click="transformer.play()"/>

Fade 效果

Fade效果是Flex4里一个很有用的过渡效果，它使得你可以让对象淡入或淡出。这个效果在FLex3里就有了。但是Flex4包含了
更多的逻辑来处理不同的情形。

使用Fade效果很简单，设置alphaFrom,alphaTo,alphaBy就行了。
下面的代码就是把一个按钮淡出当前的界面（通过让按钮变透明）

<s:Fade target="{button}" alphaTo="0"/>

下面是一个更复杂的例子，使用states和transitions来完成。

<s:states> 
<s:State name="state1"/> 
<s:State name="state2"/> 
</s:states>
 <s:transitions> 
<s:Transition> 
<s:Fade targets="{[button0, button1, button2]}"/> 
</s:Transition> 
</s:transitions>

states节点力的代码很简单，就是声明了2个后面的状态相关的属性里会用的状态。transitions
说明，无论当前的对象的状态从哪个转换到哪个，它都会把Fade效果应用到button 0,1,2上。

接下来看看这些按钮式怎么声明的。其中要注意的就是触发可视化的2种方式：

<s:Button id="button0" label="Visible" x="100" y="0" visible="true" visible.state2="false"/> 
<s:Button id="button1" label="Alpha" x="100" y="50" alpha="0" alpha.state2="1"/> 
<s:Button id="button2" label="Existence" x="100" y="100" includeIn="state2"/>

最后还需要一个按钮来触发状态的改变：

<s:Button label="Toggle State" click="currentState=(currentState=='state1')?'state2':'state1'"/>

AnimateColor 效果
这是个Flex4里新引入的类。AnimateColor默认会对目标对象上叫做"color"的属性进行线性修改（就是对红，兰，绿通道分别进行加减操作）。这些默认行为是可以变更的：你可以指定另外一个属性来进行操作（估计是你想要操作的属性不叫“color”）。你也可以指定另外的方式来操作颜色，而不只是对RGB通道进行线性的加减。

使用AnimateColor类很简单。如果你不指定颜失色操作器，那么默认使用RGBInterpolator,你可以用你自定义的操作器，也可以用
内置的HSBInterpolator, 这个操作会对颜色的HSB通道进行加减操作。

下面的例子假设你想在用户按下鼠标的时候更改对象的外观，让它看起来像是被按下去的效果。这个例子使用一个椭圆来作为目标对象，使用放射渐变来填充里面的区域。把椭圆放进一个Group是为了能接受用户的的鼠标事件。

<s:Group mouseDown="currentState='state2'" mouseUp="currentState='state1'">
       <s:Ellipse x="50" y="50" width="100" height="100">
             <s:fill> 
                    <s:RadialGradient> 
                   <s:GradientEntry id="center" color="0xf0f0f0" color.state2="0x808080" ratio="0"/> 
                   <s:GradientEntry id="edge" color="0x404040" ratio="1"/> 
                    </s:RadialGradient> 
            </s:fill> 
        </s:Ellipse> 
</s:Group>
<s:transitions> 
              <s:Transition> 
                   <s:AnimateColor target="{center}" duration="150"/> 
             </s:Transition>
</s:transitions> 

这个例子的运行结果就是当用户在圆形上按下鼠标时，圆形会变暗，而释放鼠标时会变亮。AnimateColor在这里的作用是那个duration的设置。它会让变暗或变亮的过程慢慢发生。从而看起来更具动画效果。随着对AnimateColor的熟悉，我们可以编写自己的操作器来操作自己的属性类型。

From http://linmingren2003.blog.163.com/blog/static/56751003201010610262449/

评论

1 楼 smithfox 2011-08-04  

http://www.smithfox.com/?e=64