Очень простая гибкая анимация, не перемещающаяся вдоль оси x

Question

Я пытаюсь использовать анимацию в MXML для перемещения кнопки вдоль оси X или Y. Моя кнопка увеличивает ширину при нажатии, но не перемещается вообще. Что не так с этим кодом? Это должно быть что-то действительно простое, но я не могу найти его.

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    initialize='init()'> 

    <fx:Script> 
     <![CDATA[ 
      public function init():void {} 
     ]]> 
    </fx:Script> 

    <s:layout> 
     <s:VerticalLayout id='l' horizontalAlign="left" /> 
    </s:layout> 

    <fx:Declarations> 
     <s:Animate id="mover" target="{button}" duration="1000"> 
      <s:SimpleMotionPath property="x" valueFrom="0" valueTo="100"/> 
      <s:SimpleMotionPath property="y" valueTo="100"/> 
      <s:SimpleMotionPath property="width" valueBy="20"/> 
     </s:Animate> 
    </fx:Declarations> 

    <s:Button id="button" click="mover.play()" label="Button"/> 

</s:Application> 

Я получил этот образец из документов Adobe. Я думаю, что это должно быть связано с макетом или что-то в этом роде, но все мои попытки сменить макет, в том числе на холст или другие трюки, ничего не меняют: кнопка все еще остается на том же месте.

Благодарим за помощь!

Answer 1

Проблема возникает из-за использования VerticalLayout. Этот макет, а также HorizontalLayout игнорирует свойства x/y объектов, которые выложены.

Если вы полностью удаляете декларацию макета, она будет использовать значение по умолчанию BasicLayout, которое будет чтить свойства x/y и позволит вашей анимации работать.