Flex中ViewStack使用Efflex特效

布满荆棘的人生 2022-01-14 00:09 216阅读 0赞

先看效果：（录制问题，实际效果要比图片上的流畅）

[![193152598.gif][]][193152598.gif]

代码：

1.  <?xml version="1.0"?>
2.  
3.  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
4.  xmlns:viewStackEffects="org.efflex.mx.viewStackEffects.\*"
5.  >
6.  
7.  
8.  <viewStackEffects:Slide direction="down" id="effect\_down"/>
9.  <viewStackEffects:Slide direction="up" id="effect\_up"/>
10. 
11. <mx:Panel title="ViewStack Container Example" height="95%" width="95%"
12. paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
13. 
14. <mx:Text width="100%" color="blue"
15. text="Use the Button controls to change panels of the ViewStack container."/>
16. 
17. <mx:HBox borderStyle="solid" width="100%"
18. paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
19. 
20. <mx:Button id="searchButton" label="Search Panel"
21. click="myViewStack.selectedChild=search;"/>
22. <mx:Button id="cInfoButton" label="Customer Info Panel"
23. click="myViewStack.selectedChild=custInfo;"/>
24. <mx:Button id="aInfoButton" label="Account Panel"
25. click="myViewStack.selectedChild=accountInfo;"/>
26. </mx:HBox>
27. 
28. 
30. <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
31. 
32. <mx:Canvas id="search" backgroundColor="\#FFFFCC" label="Search" width="100%" height="100%" showEffect="effect\_up" hideEffect="effect\_down">
33. <mx:Label text="Search Screen" color="\#000000"/>
34. </mx:Canvas>
35. 
36. <mx:Canvas id="custInfo" backgroundColor="\#CCFFFF" label="Customer Info" width="100%" height="100%" showEffect="effect\_up" hideEffect="effect\_down">
37. <mx:Label text="Customer Info" color="\#000000"/>
38. </mx:Canvas>
39. 
40. <mx:Canvas id="accountInfo" backgroundColor="\#FFCCFF" label="Account Info" width="100%" height="100%" showEffect="effect\_up" hideEffect="effect\_down">
41. <mx:Label text="Account Info" color="\#000000"/>
42. </mx:Canvas>
43. </mx:ViewStack>
44. 
45. </mx:Panel>
46. </mx:Application>

代码中的：org.efflex.mx.viewStackEffects.\*

需要下载swc文件：[http://code.google.com/p/efflex/downloads/list][http_code.google.com_p_efflex_downloads_list]  
效果页面：[http://www.efflex.org/EfflexExplorer.html][http_www.efflex.org_EfflexExplorer.html]

Flex-ViewStack的官方详解：[http://help.adobe.com/zh\_CN/FlashPlatform/reference/actionscript/3/mx/core/Container.html][http_help.adobe.com_zh_CN_FlashPlatform_reference_actionscript_3_mx_core_Container.html]

如遇到实例化问题：请设置此组件的属性 creationPolicy="all"，请求参见组件的子代创建策略[http://help.adobe.com/zh\_CN/FlashPlatform/reference/actionscript/3/mx/core/Container.html\#creationPolicy][http_help.adobe.com_zh_CN_FlashPlatform_reference_actionscript_3_mx_core_Container.html_creationPolicy]

转载于:https://blog.51cto.com/programmer/1127963

[193152598.gif]: https://s1.51cto.com/attachment/201301/193152598.gif
[http_code.google.com_p_efflex_downloads_list]: http://code.google.com/p/efflex/downloads/list
[http_www.efflex.org_EfflexExplorer.html]: http://www.efflex.org/EfflexExplorer.html
[http_help.adobe.com_zh_CN_FlashPlatform_reference_actionscript_3_mx_core_Container.html]: http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/mx/core/Container.html
[http_help.adobe.com_zh_CN_FlashPlatform_reference_actionscript_3_mx_core_Container.html_creationPolicy]: http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/mx/core/Container.html#creationPolicy