用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}); 
}