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>