v4_10 使用特效来实现组件动画
v4_10 Animating components with effects 使用特效来实现组件动画
ex4_09
动画常常被认为过度使用或者没有必要,但如果制作和好,却不仅能增强用户体验而且也能和用户维持一个有效的对话
这段话告诉我们有效但不要过度
这部分主要讲
如何在对用户的响应或者系统事件中使用动画组件里的Spark特效
在Flex开发中动画的定义
动画:某个组件的某个属性值随着时间发生的改变
flex提供两个特效包
MX特效在mx.effects包中,并且它只在UIComponent类的子类中有效
Spark特效在spark.effects包中,可以和任何对象一起使用
Spark特效它基于一个Animate超类,可以扩展Animate类生成自己的特效
Spark效果被分为5类
首先定义一个特效对象,声明id,并绑定到target="{xxx}"或targets="{[xxx,xxx]}"上
1.来个简单的特效
<fx:Declarations>
<s:Move id="share" target="{login}" xBy="20"/>
</fx:Declarations>
注意这个特效是绑定在Panel上的,所以点Panel上哪里都可以
<s:Panel id="login" title="Login" includeIn="loginState" x="24" y="112" width="250" height="168" click="share.play()">
2.复合特效
要一次运用多种特效,就要使用复合特效
Parallel复合特效会使所有特效同时运行
Sequence复合特效会使所有特效按顺序运行
这样,特效目标可以定义在单独特效或者复合特效
<fx:Declarations>
<s:Sequence id="share" target="{login}">
<s:Move xBy="20"/>
<s:Move xBy="-20"/>
<s:Move xBy="20"/>
<s:Move xBy="-20"/>
<s:Move xBy="20"/>
<s:Move xBy="-20"/>
<s:Move xBy="20"/>
<s:Move xBy="-20"/>
</s:Sequence>
默认情况下,一个动作要1000ms来播放,而这里有8个特效,得8s
可以
duration来设置特效时间
<s:Sequence id="share" target="{login}" duration="50">
<s:Move xBy="20"/>
<s:Move xBy="-20"/>
<s:Move xBy="20"/>
<s:Move xBy="-20"/>
<s:Move xBy="20"/>
<s:Move xBy="-20"/>
<s:Move xBy="20"/>
<s:Move xBy="-20"/>
</s:Sequence>
duration也可以加在每个move上,分别设置时间
三维的效果
<s:Sequence id="share" target="{login}" >
<s:Move3D xBy="20" yBy="20" zBy="20"/>
</s:Sequence>