Sを使ってシェイプを移動する：move MXML

Question

私は長方形でアニメーションを作成しようとしています。 私は、長方形をx = 150からx = 50まで、そして150に戻ってループするようにします。

私は矩形を前方に移動することができ、100px移動した後は停止します。

ループを作成する方法はありますか？

これは私が思いついたものです。あまり知らない。

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

Answer 1

このようなものを試してください：あなたがここでの主なアイデアは行で実行するために2つのMoveアニメーションを強制的にSequence効果を使用して、次に設定することで、このSequence効果をループしている見ることができるように

<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> 

そのrepeatCountプロパティは0になります。

Answer 2

tweenliteアニメーションライブラリを使用することをお勧めします。アニメーションにはFlexやMXMLの組み込みアニメーションオプションを使用しないことをお勧めします。 Tweenliteにはもっと多くの選択肢があり、使いやすいです。

以下のコードを使用すると、ライブラリの動作を確認できます。この関数は、Sine.easeInを使用してオブジェクトの矩形を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}); 
}