用S移動形狀：移動MXML

Question

我正嘗試用矩形創建動畫。 我想矩形移動從x = 150到x = 50，然後回到150，等等。

目前我只能將矩形向前移動，並在移動100px後停止。

任何想法如何創建循環？

這就是我想出的。我知道的不多。

<s:Move id="moves" 
target="{rect2}" 
xBy="-150" 
duration="1000" 
easer="{sineEasing}"/> 

Answer 1

嘗試這樣的事：

<mx:Sequence id="seq" repeatCount="0"> 
    <s:Move 
     target="{rect}" 
     xBy="150" 
     duration="1000" 
     easer="{sineEasing}"/> 
    <s:Move 
     target="{rect}" 
     xBy="-150" 
     duration="1000" 
     easer="{sineEasing}"/> 
</mx:Sequence> 

正如你可以看到這裏的主要思想是利用Sequence效應強行使兩個Move動畫連續執行，然後通過設置循環這個Sequence效果其repeatCount財產至0。

Answer 2

我會建議使用tweenlite動畫庫，而不是使用Flex和MXML的內置動畫選項進行動畫。 Tweenlite有更多的選擇，並且非常易於使用。

通過下面的代碼，您可以看到庫的工作原理。該函數將Sine.easeIn在1秒的時間內緩慢移動到位置65,117。

TweenLite.to(rect, 1, {x:65, y:117, ease:Sine.easeIn}); 

如果再使用一些額外的參數，你可以創建一個循環，就像這樣：

handleAnimation(); 

private function handleAnimation(e:Event=null):void 
{ 
    var positionTo:Int = (rect.x == 150) ? 50 : 150; 
    TweenLite.to(rect, 1, {x:positionTo, ease:Sine.easeIn, onComplete:handleAnimation}); 
}