flex4添加具有过渡效果的组

时间:2013-01-24 17:06:51

标签: actionscript-3 flex flex4

如何使用转换效果向SkinnableContainer添加一个组(具有未知大小)?

示例
首先,将SkinnableContainer平滑调整到最终大小,然后淡入组。

特此问题
通过将其添加到SkinnableContainer来确定Group-size。这样做,SkinnableContainer获得最终大小并显示组,而不播放过渡效果。

我发现的所有示例都是MXML和基于状态的。但我需要一个仅限Actionscript的解决方案。

1 个答案:

答案 0 :(得分:0)

 <fx:Declarations>
    <s:Parallel id="showEff">
        <s:Rotate3D angleYFrom="-90" angleYTo="0" duration="7000"/>
        <s:Fade alphaFrom="0.0" alphaTo="1.0" duration="7000" />
        <mx1:WipeRight duration="9000"/>
    </s:Parallel>

    <s:Parallel id="hideEff">
        <s:Rotate3D angleYFrom="0" angleYTo="-90" duration="4000" />
        <s:Fade alphaFrom="1.0" alphaTo="0.0"  duration="7000"/>
        <mx1:WipeRight duration="5000"/>
    </s:Parallel>
</fx:Declarations>


    <s:Button id="btn"
              label="Toggle Panel visibility"
              click="skinnableContainerPanel.visible =      !skinnableContainerPanel.visible;" />

 <s:Panel id="skinnableContainerPanel" title="Using SkinnableContainer" 
         width="500" height="300" showEffect="{showEff}"
         hideEffect="{hideEff}" >
    <s:layout>
        <s:VerticalLayout  gap="10" verticalAlign="middle" 
                           horizontalAlign="center"/>
    </s:layout>
<s:SkinnableContainer
    skinClass="com.SkinnableContainerSkin" 
    width="50%" height="50%" horizontalCenter="0"
    verticalCenter="0">
    <s:HGroup horizontalCenter="0" verticalCenter="0"  >
        <s:BorderContainer width="50" height="50"  
                           borderWeight="2"   color="0x323232" />
        <s:BorderContainer width="50" height="50"  
                           borderWeight="2" color="0x323232" />
        <s:BorderContainer width="50" height="50" 
                           borderWeight="2" color="0x323232" />
    </s:HGroup>
</s:SkinnableContainer>
</s:Panel>