面板移动效果（sates）

最新推荐文章于 2025-06-24 16:39:15 发布

原创最新推荐文章于 2025-06-24 16:39:15 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#transition #application #parallel #library

Flex 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一个使用Adobe Flex框架实现的状态管理及过渡动画效果示例。通过定义不同的状态和过渡，展示了如何平滑地改变UI组件的位置和大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
   
   <s:states>
       <s:State name="Default"/>
       <s:State name="One"/>
       <s:State name="Two"/>
   </s:states>
   
   <s:transitions>
       <mx:Transition fromState="*" toState="*">
           <mx:Sequence id="t1" targets="{[p1,p2,p3]}">
               <mx:Parallel>
                   <s:Move duration="400"/>
                   <s:Resize duration="400"/>
               </mx:Parallel>
           </mx:Sequence>
       </mx:Transition>
   </s:transitions>
   <s:Group id="pm" width="100%" height="100%" >
       <s:Panel id="p1" title="查询"
               x="0" y="0"
               x.One="110"
               width="100" height="100"
               width.One="200" height.One="210"
               click="currentState='One'" >
           <s:Label fontSize="24" text="One"/>
       </s:Panel>
       <s:Panel id="p2" title="添加"
               x="0" y="110"
               y.One="0"
               x.Two="110" y.Two="0"
               width="100" height="100"
               width.Two="200" height.Two="210"
               click="currentState='Two'" >
           <s:Label fontSize="24" text="Two"/>
       </s:Panel>
       <s:Panel id="p3" title="删除"
               x="110" y="0"
               x.One="0" y.One="110"
               x.Two="0" y.Two="110"
               width="200" height="210"
               width.One="100" height.One="100"
               width.Two="100" height.Two="100"
               click="currentState=''" >
           <s:Label fontSize="24" text="Three"/>
       </s:Panel>
   </s:Group>
</s:Application>