| djyamato |
05.08.2011 22:08 |
States + Transitions плавная смена положения объектов
Здравствуйте
У меня вопрос:
Есть 2 прямоугольника в VGroup
Есть 2 стэйта "normal" "extended"
Один прямоугольник в обоих стэйтах, а второй, только в extended
Так вот, возможно ли сделать transition чтобы прямоугольник, который в "extended" стэйте плавно всплыл под первым прямоугольником, не помещая всплываемый прямоугольник в "extended" стэйт ?
Сейчас нижний (всплывающий) прямоугольник попросту появляется без анимации "всплытия"
Вот код:
Код AS3:
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("com.TestComponent")]
</fx:Metadata>
<s:states>
<s:State name="normal"/>
<s:State name="extended"/>
</s:states>
<s:transitions>
<s:Transition fromState="normal" toState="extended">
<s:Sequence>
<s:Fade target="{extendedeGroup}" alphaFrom="0" alphaTo="1" duration="1000"/>
<s:Move target="{extendedeGroup}" yFrom="100" yTo="0" duration="1000"/>
</s:Sequence>
</s:Transition>
<s:Transition fromState="extended" toState="normal">
<s:Sequence>
<s:Fade target="{extendedeGroup}" alphaFrom="1" alphaTo="0" duration="1000"/>
<s:Move target="{extendedeGroup}" yFrom="0" yTo="100" duration="1000"/>
</s:Sequence>
</s:Transition>
</s:transitions>
<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Group id="normalGroup" includeIn="normal,extended">
<s:Rect width="100" height="40">
<s:fill>
<s:SolidColor color="0xFF0000"/>
</s:fill>
</s:Rect>
</s:Group>
<s:Group id="extendedeGroup" includeIn="extended">
<s:Rect width="100" height="80">
<s:fill>
<s:SolidColor color="0xFF00FF"/>
</s:fill>
</s:Rect>
</s:Group>
</s:VGroup>
</s:Skin>
и сам компонент
Код AS3:
<s:SkinnableComponent xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Metadata>
[SkinState(name="normal")]
[SkinState(name="extended")]
</fx:Metadata>
<fx:Script>
<![CDATA[
protected var _state:String;
public function set state(val:String):void
{
_state=val;
invalidateSkinState();
}
public function get state():String
{
return _state;
}
override protected function getCurrentSkinState():String
{
return _state;
}
]]>
</fx:Script>
</s:SkinnableComponent>
|
