组别:注册会员
性别:
来自:
积分:91
帖子:56
注册: 2006-08-29

2008-01-21 16:15 | 只看楼主

树型| 收藏| 小中大 1

Flex的动画效果与变换！（三）（完）

本文出自www.jiangzone.com.cn，如需转载，请注明出处！
原文地址：http://www.jiangzone.com.cn/article.asp?id=49

这篇文章是Flex动画效果变换的最后一编了，这篇将会讲述Flex中的“变面”（我自已的理解）技术，即是Transitions！

如果看过Flex SDK里面的自带的例子程序，有一个叫“Flex Store”的应用，在里面的手机列表中看某一个手机的详细时，就是这种效果，不多说，这篇会比较简单，先看看效果：

看到了效果了吧，这种的变换不难实现，再来看看代码再解析：

[复制到剪贴板]

CODE:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="695" height="555">
<mx:states>
<mx:State name="A">
<mx:SetProperty target="{windowA}" name="width" value="500"/>
<mx:SetProperty target="{windowA}" name="height" value="300"/>
<mx:SetProperty target="{windowC}" name="width" value="150"/>
<mx:SetProperty target="{windowC}" name="height" value="150"/>
<mx:SetProperty target="{windowC}" name="y" value="333"/>
<mx:SetProperty target="{windowD}" name="x" value="373"/>
<mx:SetProperty target="{windowD}" name="width" value="150"/>
<mx:SetProperty target="{windowD}" name="height" value="150"/>
<mx:SetProperty target="{windowD}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="x" value="23"/>
<mx:SetProperty target="{windowB}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="width" value="150"/>
<mx:SetProperty target="{windowB}" name="height" value="150"/>
<mx:SetProperty target="{windowC}" name="x" value="200"/>
</mx:State>
<mx:State name="B">
<mx:SetProperty target="{windowD}" name="width" value="150"/>
<mx:SetProperty target="{windowD}" name="height" value="150"/>
<mx:SetProperty target="{windowC}" name="width" value="150"/>
<mx:SetProperty target="{windowC}" name="height" value="150"/>
<mx:SetProperty target="{windowA}" name="width" value="150"/>
<mx:SetProperty target="{windowA}" name="height" value="150"/>
<mx:SetProperty target="{windowB}" name="width" value="500"/>
<mx:SetProperty target="{windowB}" name="height" value="300"/>
<mx:SetProperty target="{windowA}" name="y" value="333"/>
<mx:SetProperty target="{windowC}" name="x" value="200"/>
<mx:SetProperty target="{windowC}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="x" value="23"/>
<mx:SetProperty target="{windowD}" name="x" value="373"/>
<mx:SetProperty target="{windowD}" name="y" value="333"/>
</mx:State>
<mx:State name="C">
<mx:SetProperty target="{windowD}" name="width" value="150"/>
<mx:SetProperty target="{windowD}" name="height" value="150"/>
<mx:SetProperty target="{windowB}" name="width" value="150"/>
<mx:SetProperty target="{windowB}" name="height" value="150"/>
<mx:SetProperty target="{windowA}" name="width" value="150"/>
<mx:SetProperty target="{windowA}" name="height" value="150"/>
<mx:SetProperty target="{windowC}" name="width" value="500"/>
<mx:SetProperty target="{windowC}" name="height" value="300"/>
<mx:SetProperty target="{windowA}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="x" value="200"/>
<mx:SetProperty target="{windowB}" name="y" value="333"/>
<mx:SetProperty target="{windowC}" name="x" value="23"/>
<mx:SetProperty target="{windowC}" name="y" value="19"/>
<mx:SetProperty target="{windowD}" name="x" value="373"/>
<mx:SetProperty target="{windowD}" name="y" value="333"/>
</mx:State>
<mx:State name="D">
<mx:SetProperty target="{windowC}" name="width" value="150"/>
<mx:SetProperty target="{windowC}" name="height" value="150"/>
<mx:SetProperty target="{windowB}" name="width" value="150"/>
<mx:SetProperty target="{windowB}" name="height" value="150"/>
<mx:SetProperty target="{windowA}" name="width" value="150"/>
<mx:SetProperty target="{windowA}" name="height" value="150"/>
<mx:SetProperty target="{windowD}" name="width" value="500"/>
<mx:SetProperty target="{windowD}" name="height" value="300"/>
<mx:SetProperty target="{windowA}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="x" value="200"/>
<mx:SetProperty target="{windowB}" name="y" value="333"/>
<mx:SetProperty target="{windowD}" name="x" value="23"/>
<mx:SetProperty target="{windowD}" name="y" value="19"/>
<mx:SetProperty target="{windowC}" name="x" value="373"/>
<mx:SetProperty target="{windowC}" name="y" value="333"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Parallel targets="{[windowA, windowB, windowC, windowD]}">
<mx:Move />
<mx:Resize />
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:TitleWindow x="23" y="19" width="250" height="200" layout="absolute" title="A" id="windowA" click="currentState='A'" />
<mx:TitleWindow x="309" y="19" width="250" height="200" layout="absolute" title="B" id="windowB" click="currentState='B'" />
<mx:TitleWindow x="23" y="260" width="250" height="200" layout="absolute" title="C" id="windowC" click="currentState='C'" />
<mx:TitleWindow x="309" y="260" width="250" height="200" layout="absolute" title="D" id="windowD" click="currentState='D'" />
</mx:Application>

代码会比较多，我们先看看<mx:states>标签，它是一个集合，就是你的程序有多少个状态，什么是状态呢？我自已理解就即是有多少个“面谱”，即是现在程序里面有四个显示界面状态，所以里面有四个<mx:State>标签，每个<mx:State>状态都需要有一个名字name属性，以区分是哪个界面状态，在每个状态里面都有很多<mx:SetProperty>的标签，看英文都知道了，该标签用于设置这个状态下的所有界面元素的属性（组件的属性），因为每个界面状态中各个组件的大小布局都不同，所以在状态标签里就要预先设置好该状态下的组件的位置与大小，那个target="{windowC}"属性就是设置你要设置的哪个组件的名字拉，name="height"就是你要设置的属性value="333"就是你要设置该属性的值，我们细心看看的话，可能会发现，每个状态里面设置的属性，都是width,height,x,y这四个属性，我们看看上面的最终效果就知道无论切换哪个状态，组件间的变换来来去去都是移动位置与大小改变，就是说当你变换状态时，需要改动哪些属性的，就将它的目标值设置在<mx:SetProperty>标签里。再看看下面的<mx:transitions>标签，这个也是个集合，里面放着不同的变换方法<mx:Transition>，我们来看看变换标签的代码：

[复制到剪贴板]

CODE:

<mx:Transition fromState="*" toState="*">
<mx:Parallel targets="{[windowA, windowB, windowC, windowD]}">
<mx:Move />
<mx:Resize />
</mx:Parallel>
</mx:Transition>

formState与toState属性是要设置该状态变换是怎样触发的，里面要填上状态的名字，<mx:State name="C"> C就是状态的名字，即是如果你formState="A",toState="C"的话，只有从A状态切换到C状态时，才会产生以上的变换动画效果，如果不附合该规则如A切换到B状态的话，则只会按状态的属性设置值来直接生成视图，而没有动画渐变效果了。如果填上“*”的话，就是无论是哪个状态切换到哪个，都会运行动画效果，至于变换期间用到哪种动画效果来进行渐变，就在它的下级标签里定义了，这里它用到了<mx:Parallel>并列播放移动与重整大小的动画效果，之前文章讲过，这里不多说了。基本上，一个变换就做好了，但我们还需要触发它，也就是去改变程序当前的显示状态：click="currentState='A'" 在每个组件的click事件里，改变程序的currentState值，就是改变程序的当前显示状态！之后动画效果就会触发了！

迟点有时间，再做一个3D的动画效果，将会用到PV3D的框架，再整理一个代码与教程也贴出来跟大家分享吧，不过不知道大家对PV3D这个东东熟悉不，不熟悉的话，可能看得痛苦点，至于PV3D方面的教程，我也看看抽点时间写写吧！先谢过大家的支持！

cimmicola 个人空间组别:版主性别: 来自: 积分:1536 帖子:1507 注册: 2007-07-09	2008-01-21 16:23 \| 树型\| 收藏\| 小中大 2 回复：Flex的动画效果与变换！（三）（完）谢谢分享支持，这个集合置顶了。欢迎继续分享教程。 Protoss拥有高度的文明、先进的科技和强大的精神力量。但是由于长达千年的寿命，种群数量稀少，消耗不过繁殖能力出众的Zerg，险些被Zerg给灭族。

lishuanghi 组别:中级会员性别: 来自: 积分:103 帖子:103 注册: 2007-11-18	2008-01-21 16:49 \| 树型\| 收藏\| 小中大 3 回复：Flex的动画效果与变换！（三）（完）再次谢谢分享。都谢了3次了。哈哈。

wanlima1988 组别:中级会员性别: 来自: 积分:156 帖子:156 注册: 2007-09-25	2008-01-22 17:55 \| 树型\| 收藏\| 小中大 4 回复：Flex的动画效果与变换！（三）（完）这样实现也太麻烦了吧.就是一个效果而已，楼主也太大动干戈了吧?不过上篇文章还算可以。

个人空间

组别:版主
性别:
来自:
积分:1536
帖子:1507
注册: 2007-07-09

2008-01-22 22:21 |

树型| 收藏| 小中大 5

回复：Flex的动画效果与变换！（三）（完）

的确是的，这样写比较依赖于mxml的，如果切换对象很多就麻烦了。。。有捷径的。

Protoss拥有高度的文明、先进的科技和强大的精神力量。但是由于长达千年的寿命，种群数量稀少，消耗不过繁殖能力出众的Zerg，险些被Zerg给灭族。

supperbbq 组别:新手上路性别: 来自: 积分:10 帖子:10 注册: 2007-10-26	2008-01-23 09:27 \| 树型\| 收藏\| 小中大 6 回复：Flex的动画效果与变换！（三）（完）不错！顶一下！

bright82 组别:新手上路性别: 来自: 积分:1 帖子:1 注册: 2008-01-30	2008-01-30 17:11 \| 树型\| 收藏\| 小中大 7 回复: Flex的动画效果与变换！（三）（完）引用: 原帖由 cimmicola 于 2008-1-22 22:21:00 发表的确是的，这样写比较依赖于mxml的，如果切换对象很多就麻烦了。。。有捷径的。捷径的例子呢? 我还是喜欢as来实现.

phoenixfu 杰╃PhoeNix 组别:注册会员性别: 来自: 积分:30 帖子:30 注册: 2008-01-22	2008-01-31 10:29 \| 树型\| 收藏\| 小中大 8 回复：Flex的动画效果与变换！（三）（完） cimmicola 应该会抽空把，捷径的方法写帖出来吧？嘿嘿

个人空间

组别:版主
性别:
来自:
积分:1536
帖子:1507
注册: 2007-07-09

2008-01-31 10:40 |

树型| 收藏| 小中大 9

回复：Flex的动画效果与变换！（三）（完）

写个需求吧，要做as的话就是一个组件了，我随便写了下，发现实用价值不大。当然如果要我用as只写这个放大唯一效果倒是没什么难度。不过这样就抽象不出来，只是针对几个panel来写的。
如果要是动态的添加组件，那像这种显示就会出现问题，这个效果只是演示4个panel，如果20个呢？一个页面肯定显示不下，非常拥挤。
而且重要在于，直接把里面的组件元素放大并没有什么价值，实际上点击一个组件元素在这个特效里只是把size和位置改变了一下，对于性能来说是非常成问题的，假设我每个组件元素比较复杂，那么在展示的时候，我必须初始化很多这样的组件元素，但是他在缩小时，是没有太大的使用意义的，只有再放大后才可以看的清楚。这样就会有性能浪费，严重情况下可能会性能下降。
因此设计思路是先展示组件的缩略图，当点击后执行放大位移的特效，然后替换成详细的组件。当然了，这是谈组件设计。如果你们只是要特效效果的as版那还是很简单的。

cimmicola 最后编辑于 2008-01-31 11:05:29

Protoss拥有高度的文明、先进的科技和强大的精神力量。但是由于长达千年的寿命，种群数量稀少，消耗不过繁殖能力出众的Zerg，险些被Zerg给灭族。

ns00 组别:新手上路性别: 来自: 积分:9 帖子:9 注册: 2007-12-20	2008-01-31 10:52 \| 树型\| 收藏\| 小中大 10 回复：Flex的动画效果与变换！（三）（完）组件的缩略图应该只是包含简单的组件ID,当放大时再去获取相应的组件信息?

个人空间

组别:版主
性别:
来自:
积分:1536
帖子:1507
注册: 2007-07-09

2008-01-31 13:49 |

树型| 收藏| 小中大 11

回复: Flex的动画效果与变换！（三）（完）

[复制到剪贴板]

CODE:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="initApp()"
>

<mx:Script>
<![CDATA[
import mx.utils.ArrayUtil;
import mx.collections.ArrayCollection;
import mx.effects.Resize;
import mx.effects.Move;
import mx.core.UIComponent;

public function initApp(){
addEvent(p1);
addEvent(p2);
addEvent(p3);
addEvent(p4);
}
private var comps:ArrayCollection=new ArrayCollection();
private function addEvent(ui : UIComponent){
ui.addEventListener(MouseEvent.CLICK, clickHandler);
comps.addItem(ui);
}

private function clickHandler(e:MouseEvent){
var selected : UIComponent= e.currentTarget as UIComponent;
showOn(selected);
showOff(selected, comps);
}

private var margin:int=10;
private function showOn(selected:UIComponent){
var moveEffect:Move=new Move(selected);
moveEffect.duration=300;
moveEffect.xFrom=selected.x;
moveEffect.xTo=margin;
moveEffect.yFrom=selected.y;
moveEffect.yTo=margin;
moveEffect.play();
var resizeEffect:Resize=new Resize(selected);
resizeEffect.duration=300;
resizeEffect.heightFrom=selected.height;
resizeEffect.heightTo=showArea.height*0.7;
resizeEffect.widthFrom=selected.width;
resizeEffect.widthTo=showArea.width - (margin *2);
resizeEffect.play();
}

private function showOff(selected:UIComponent, compsArr:ArrayCollection){

//从所有组件集合中排除被选中的。
compsArr.removeItemAt(compsArr.getItemIndex(selected));
var unselecteds:ArrayCollection=compsArr;
var index:int=0;
for each (var item:UIComponent in unselecteds){

var resizeEffect:Resize=new Resize(item);
resizeEffect.duration=300;
resizeEffect.heightFrom=item.height;
resizeEffect.heightTo=showArea.height*0.3-(2*margin+5);
resizeEffect.widthFrom=item.width;
resizeEffect.widthTo=((showArea.width-4*margin)/comps.length);
resizeEffect.play();

var moveEffect:Move=new Move(item);
moveEffect.duration=300;
moveEffect.xFrom=item.x;
moveEffect.xTo=margin+index * (resizeEffect.widthTo+margin);
moveEffect.yFrom=item.y;
moveEffect.yTo=showArea.height*0.7+2*margin;
moveEffect.play();

index++;
}

compsArr.addItem(selected);//再恢复完整的
}
]]>
</mx:Script>

<mx:Canvas x="0" y="40" width="528" height="429" id="showArea">
<mx:Panel x="10" y="10" width="250" height="200" layout="absolute" title="1" id="p1">
</mx:Panel>
<mx:Panel x="268" y="10" width="250" height="200" layout="absolute" title="2" id="p2">
</mx:Panel>
<mx:Panel x="10" y="218" width="250" height="200" layout="absolute" title="3" id="p3">
</mx:Panel>
<mx:Panel x="268" y="218" width="250" height="200" layout="absolute" title="4" id="p4">
</mx:Panel>
</mx:Canvas>
</mx:Application>

附件:

您所在的用户组无法下载或查看附件

Protoss拥有高度的文明、先进的科技和强大的精神力量。但是由于长达千年的寿命，种群数量稀少，消耗不过繁殖能力出众的Zerg，险些被Zerg给灭族。

个人空间

组别:版主
性别:
来自:
积分:1536
帖子:1507
注册: 2007-07-09

2008-01-31 13:50 |

树型| 收藏| 小中大 12

回复: Flex的动画效果与变换！（三）（完）

这个并非组件。只是用as来实现的以上效果。。。

cimmicola 最后编辑于 2008-01-31 13:55:39

Protoss拥有高度的文明、先进的科技和强大的精神力量。但是由于长达千年的寿命，种群数量稀少，消耗不过繁殖能力出众的Zerg，险些被Zerg给灭族。

phoenixfu 杰╃PhoeNix 组别:注册会员性别: 来自: 积分:30 帖子:30 注册: 2008-01-22	2008-02-01 10:46 \| 树型\| 收藏\| 小中大 13 回复：Flex的动画效果与变换！（三）（完）你。。。。我靠！！！！实在太帅了！！！谢谢！！刚好想学这个效果！不用说了，以后跟定你了！

phoenixfu 杰╃PhoeNix 组别:注册会员性别: 来自: 积分:30 帖子:30 注册: 2008-01-22	2008-02-04 11:15 \| 树型\| 收藏\| 小中大 14 回复: Flex的动画效果与变换！（三）（完）附件: 您所在的用户组无法下载或查看附件很多都没类型? 为什么我拷贝代码会有这样的问题?? 是我的配置问题吗?

笨笨蜗牛

组别:中级会员
性别:
来自:广东
积分:160
帖子:160
注册: 2008-01-08

2008-02-04 11:27 |

树型| 收藏| 小中大 15

回复：Flex的动画效果与变换！（三）（完）

这个仅仅是警告，问题不严重，不过作为严谨的编程思想，不应该有这样的警告。

出现这个警告就是你的配置是严谨模式导致的，如果取消严谨模式就不会有警告了。

另外，要解决这个问题：只要根据函数返回的结果类型，给函数增加返回类型说明就行（如果不返回就用void），最简单的就把返回类型设置为object或*

蜗牛恒久远一颗永流传

phoenixfu 杰╃PhoeNix 组别:注册会员性别: 来自: 积分:30 帖子:30 注册: 2008-01-22	2008-02-04 11:35 \| 树型\| 收藏\| 小中大 16 回复：Flex的动画效果与变换！（三）（完）要手动在方法名后面加上:void才行哦~

pbdc 组别:新手上路性别: 来自: 积分:4 帖子:4 注册: 2008-03-02	2008-03-04 23:25 \| 树型\| 收藏\| 小中大 17 回复：Flex的动画效果与变换！（三）（完）好好研究下

libran 组别:注册会员性别: 来自:天津积分:82 帖子:82 注册: 2008-01-16	2008-03-31 13:29 \| 树型\| 收藏\| 小中大 18 回复：Flex的动画效果与变换！（三）（完）找到强人了

lxw82307 寒天水个人空间组别:版主性别: 来自:辽宁积分:203 帖子:203 注册: 2008-01-31	2008-03-31 15:27 \| 树型\| 收藏\| 小中大 19 回复：Flex的动画效果与变换！（三）（完）支持

erlet 组别:新手上路性别: 来自: 积分:9 帖子:9 注册: 2008-04-24	2008-05-05 15:23 \| 树型\| 收藏\| 小中大 20 回复：Flex的动画效果与变换！（三）（完）楼主很强大，正式我要找的我给改成上下变化的折叠式列表了

RIACHINA 中国RIA开发者论坛RIA 客户端开发FLEX 专区 Flex的动画效果与变换！（三）（完）

Flex的动画效果与变换！（三）（完）

Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复: Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复: Flex的动画效果与变换！（三）（完）

附件:

您所在的用户组无法下载或查看附件

回复: Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复: Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

回复：Flex的动画效果与变换！（三）（完）

RIACHINA 中国RIA开发者论坛RIA 客户端开发 FLEX 专区 Flex的动画效果与变换！（三）（完）