Помогите найти ошибку в анимации между стэйтами

[djyamato]

Здравствуйте
Подскажите, что я упустил.
Вот ссылка на простую анимацию перехода между 2мя состояниями
Красный прямоуголиник в момент начала движения вниз подергивается
Почему ?
Вот код:

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		width="300" 
		height="300">
	<fx:Declarations>
		<!-- движение зеленого прямоугольника вверх -->
		<s:Animate id="moveFotoUp" 
				   targets="{[fotosGroup]}" 
				   duration="1000"
				   effectEnd="moveFotoUp_effectEndHandler(event)">
			<s:SimpleMotionPath property="top" valueFrom="{height-40}" valueTo="0" />
		</s:Animate>
 
		<!-- движение красного прямоугольника вниз -->
		<s:Animate id="moveVideoDown" 
				   targets="{[videosGroup]}" 
				   duration="1000"
				   effectEnd="moveVideoDown_effectEndHandler(event)">
			<s:SimpleMotionPath property="bottom" valueFrom="{height-20}" valueTo="0" />
		</s:Animate>
 
		<!-- появление красного прямоугольника сверху -->
		<s:Animate id="bindVideoDown" 
				   targets="{[videosGroup]}" 
				   duration="300">
			<s:SimpleMotionPath property="bottom" valueFrom="{height+21}" valueTo="{height-20}" />
		</s:Animate>
 
		<!-- появление зеленого прямоугольника снизу -->
		<s:Animate id="bindFotoUp" 
				   targets="{[fotosGroup]}" 
				   duration="300">
			<s:SimpleMotionPath property="top" valueFrom="{height+40}" valueTo="{height-20}" />
		</s:Animate>
	</fx:Declarations>
 
	<s:states>
		<s:State name="fotos"/>
		<s:State name="videos"/>
	</s:states>
 
	<fx:Script>
		<![CDATA[
			import mx.events.EffectEvent;
 
			override protected function stateChanged(oldState:String, newState:String, recursive:Boolean):void
			{
				super.stateChanged(oldState, newState, recursive);
				switch(newState)
				{
					case "fotos":
						contentGroup.setElementIndex(fotosGroup,1);
						contentGroup.setElementIndex(videosGroup,0);
						moveFotoUp.play();
						break;
					case "videos":
						contentGroup.setElementIndex(videosGroup,1);
						contentGroup.setElementIndex(fotosGroup,0);
						moveVideoDown.play();
						break;
				}
			}
 
			protected function moveFotoUp_effectEndHandler(event:EffectEvent):void
			{
				contentGroup.setElementIndex(fotosGroup,0);
				bindVideoDown.play();
			}
 
			protected function moveVideoDown_effectEndHandler(event:EffectEvent):void
			{
				contentGroup.setElementIndex(videosGroup,0);
				bindFotoUp.play();
			}
		]]>
	</fx:Script>
 
	<s:Group id="contentGroup" width="100%" height="100%">
		<s:Group id="videosGroup" 
				 width="100%" 
				 height="100%">
			<s:Rect width="100%" height="100%">
				<s:fill>
					<s:SolidColor color="0xff0000"/>
				</s:fill>
			</s:Rect>
			<s:Rect width="60"
					height="20" 
					bottom="-20">
				<s:fill>
					<s:SolidColor color="0xff0000"/>
				</s:fill>
			</s:Rect>
			<s:Label text="VIDEOS" bottom="-20"/>
		</s:Group>
 
		<s:Group id="fotosGroup" 
				 width="100%" 
				 height="100%">
			<s:Rect width="100%" height="100%">
				<s:fill>
					<s:SolidColor color="0x00ff00"/>
				</s:fill>
			</s:Rect>
			<s:Rect width="60" 
					height="20" 
					top="-20" 
					right="20">
				<s:fill>
					<s:SolidColor color="0x00ff00"/>
				</s:fill>
			</s:Rect>
			<s:Label text="FOTOS" right="30" top="-15"/>
		</s:Group>
	</s:Group>
 
 
	<s:HGroup width="100%" horizontalAlign="center">
		<s:Button label="fotos" click="{currentState='fotos'}"/>
		<s:Button label="videos" click="{currentState='videos'}"/>
	</s:HGroup>
</s:Group>

[alatar]

Проще переписать на Transition и использовать top.fotos="10" / bottom.videos="10" и т.д.

[djyamato]

Спасибо, попробую