v4_11 替视图状态应用变换 _Web前端

v4_11 为视图状态应用变换

v4_11 Animating states with transitions? 为视图状态应用变换

ex_10

这部分主要讲

把有关状态和效果的知识结合起来,创建状态间切换的动画过渡效果

如何创建多组件复合效果,以及控制组件在动画过程中出现和消失的时间

要想创建动画效果,首先需要定义一个或多个状态供切换

还需要定义这些效果的顺序以及特性

效果代码中还必须定义该效果的目标组件

Transition实例的fromState和toState属性中使用星号来表示任意状态

fade没有列出target,所以它是以Parallel所有的目标组件为targets

1.来个简单的例子

当从loginState状态变换到portalState状态时,这个动画效果就会被播放

但这里要注意Parallel 的target是employeeOfTheMonth,而这块Panel在两个状态中都存在

所以没有看出fade的效果

<s:transitions>
<s:Transition fromState="loginState" toState="portalState">
<s:Parallel target="{employeeOfTheMonth}">
<s:Fade/>
<s:Move/>
</s:Parallel>
</s:Transition>
</s:transitions>

2.控制多个组件一起同时运动

<s:transitions>
<s:Transition fromState="loginState" toState="portalState">
<s:Parallel targets="{[employeeOfTheMonth,search,cafeteriaSpecial,monthlyEvents]}">
<s:Fade/>
<s:Move target="{employeeOfTheMonth}"/>
<s:Move target="{search}"
xFrom="-166"/>
<s:Move target="{cafeteriaSpecial}"
yFrom="-329"/>
<s:Move target="{monthlyEvents}"
xFrom="833"/>
</s:Parallel>
</s:Transition>
</s:transitions>

3.让login淡出,让employeeOfTheMonth移进来

以下的代码运行时,效果有点问题

<s:transitions>
<s:Transition fromState="loginState" toState="portalState">
<s:Sequence>
<s:Parallel>
<s:Fade target="{login}"/>
<s:Move target="{employeeOfTheMonth}"/>
</s:Parallel>
<s:Parallel targets="{[search,cafeteriaSpecial,monthlyEvents]}">
<s:Fade/>
<s:Move target="{search}"
xFrom="-166"/>
<s:Move target="{cafeteriaSpecial}"
yFrom="-329"/>
<s:Move target="{monthlyEvents}"
xFrom="833"/>
</s:Parallel>
</s:Sequence>
</s:Transition>
</s:transitions>

4.使用AddAction效果来定义具体的目标组件应该在何时加入到动画效果中

? 使用RemoveAction效果来定义目标组件何时被从动画效果中移除

? 把第一个状态中有而第二个状态没有的id移除

? 在进入第二个状态时,把第一个状态没有,第二个状态有的id加进来

<s:transitions>
<s:Transition fromState="loginState" toState="portalState">
<s:Sequence>
<s:Parallel>
<s:Fade target="{login}"/>
<s:Move target="{employeeOfTheMonth}"/>
</s:Parallel>
<s:RemoveAction target="{login}"/>
<s:Parallel targets="{[search,cafeteriaSpecial,monthlyEvents]}">
<s:AddAction/>
<s:Fade/>
<s:Move target="{search}"
xFrom="-166"/>
<s:Move target="{cafeteriaSpecial}"
yFrom="-329"/>
<s:Move target="{monthlyEvents}"
xFrom="833"/>
</s:Parallel>
</s:Sequence>
</s:Transition>
</s:transitions>

5.employeeOfTheMonth在move的同时调整大小,并且指定了move的开始和结束位置

<s:transitions>
<s:Transition fromState="loginState" toState="portalState">
<s:Sequence>
<s:Parallel>
<s:Fade target="{login}"/>
<s:Resize target="{employeeOfTheMonth}"
widthFrom="264" widthTo="177"/>
<s:Move target="{employeeOfTheMonth}"
xFrom="298" xTo="24"/>
</s:Parallel>
<s:RemoveAction target="{login}"/>
<s:Parallel targets="{[search,cafeteriaSpecial,monthlyEvents]}">
<s:AddAction/>
<s:Fade/>
<s:Move target="{search}"
xFrom="-166"/>
<s:Move target="{cafeteriaSpecial}"
yFrom="-329"/>
<s:Move target="{monthlyEvents}"
xFrom="833"/>
</s:Parallel>
</s:Sequence>
</s:Transition>
</s:transitions>

6.创建另一个动画过渡来设计当用户拿出应用程序时组件的动画效果

注意它removeAction和addAction的两时机,是在fade之前

search, cafeteriaSpecial, monthlyEvents fade之后就没用了,所以直接remove

而login要淡入,所以在淡入之前就要add进来

<s:Transition fromState="portalState" toState="loginState">
<s:Sequence>
<s:Parallel>
<s:Fade targets="{[search, cafeteriaSpecial, monthlyEvents]}"/>
<s:Resize target="{employeeOfTheMonth}" 
widthFrom="177" widthTo="264"/>
</s:Parallel>
<s:RemoveAction targets="{[search, cafeteriaSpecial, monthlyEvents]}"/>
<s:AddAction target="{login}"/>
<s:Parallel target="{login}">
<s:Fade/>
</s:Parallel>
</s:Sequence>
</s:Transition>

?