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有很多选择，而且非常容易使用。

使用以下代码，您可以看到库的工作原理。该函数将对象rect移动到位置65,117，Sine.easeIn缓冲1秒钟。

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

用S移动形状：移动MXML

2 个答案: