Flex4 切换States实现3D旋转效果
程序员文章站
2022-03-02 13:35:06
...
<?xml version="1.0" encoding="utf-8"?> <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" minWidth="955" minHeight="600" backgroundColor="0x747474" creationComplete="application1_creationCompleteHandler(event)" viewSourceURL="srcview/index.html"> <s:layout> <s:BasicLayout/> </s:layout> <s:states> <s:State name="s1"/> <s:State name="s2"/> </s:states> <s:transitions> <s:Transition fromState="*" toState="s2"> <s:Sequence target="{myGroup}"> <s:Parallel> <s:Fade target="{p2}" alphaFrom="1" alphaTo="0" duration="600"/> <s:Fade target="{p1}" alphaFrom="0" alphaTo="1" duration="600" effectEnd="fade1_effectEndHandler(event)"/> <s:Rotate3D angleYFrom="0" angleYTo="180" duration="600" repeatCount="1" autoCenterTransform="true"/> </s:Parallel> <s:SetAction property="includeInLayout"/> </s:Sequence> </s:Transition> <s:Transition fromState="s2" toState="*"> <s:Sequence target="{myGroup}"> <s:Parallel> <s:Fade target="{p1}" alphaFrom="1" alphaTo="0" duration="600"/> <s:Fade target="{p2}" alphaFrom="0" alphaTo="1" duration="600" effectEnd="fade2_effectEndHandler(event)"/> <s:Rotate3D angleYFrom="{angle}" angleYTo="{angle+180}" duration="600" repeatCount="1" autoCenterTransform="true"/> </s:Parallel> <s:SetAction property="includeInLayout"/> </s:Sequence> </s:Transition> </s:transitions> <fx:Script> <![CDATA[ import mx.events.EffectEvent; import mx.events.FlexEvent; [Bindable] private var angle:Number=0; protected function button1_clickHandler(event:MouseEvent):void { switch (this.currentState) { case "s1": { this.currentState='s2'; angle=0; break; } case "s2": { this.currentState='s1'; angle=180; break; } } } protected function application1_creationCompleteHandler(event:FlexEvent):void { this.vidPlay2.source="assets/002.flv"; this.vidPlay2.play(); } protected function fade1_effectEndHandler(event:EffectEvent):void { this.vidPlay1.source="assets/001.flv"; this.vidPlay1.play(); this.vidPlay2.source=null; } protected function fade2_effectEndHandler(event:EffectEvent):void { this.vidPlay2.source="assets/002.flv"; this.vidPlay2.play(); this.vidPlay1.source=null; } ]]> </fx:Script> <s:Group id="myGroup" horizontalCenter="0" verticalCenter="0" width="400" height="400"> <s:Group width="100%" height="100%" id="p1"> <s:VideoPlayer id="vidPlay1" left="0" right="0" top="0" bottom="0" autoPlay="false" includeInLayout.s1="false"/> </s:Group> <s:Group width="100%" height="100%" id="p2"> <s:VideoPlayer id="vidPlay2" left="0" right="0" top="0" bottom="0" includeInLayout.s2="false"/> </s:Group> </s:Group> <s:Button label="Change State" click="button1_clickHandler(event)" horizontalCenter="0" verticalCenter="250"/> </s:Application>
上一篇: 大话重构连载7:重构是一系列的等量变换
下一篇: 大话重构连载10:小设计而不是大布局