使用 S:move MXML 移动形状

发布于 2025-01-05 15:18:57 字数 263 浏览 2 评论 0原文

我正在尝试用矩形创建动画。我希望矩形从 x=150 循环移动到 x=50，然后返回 150，依此类推。

目前我只能将矩形向前移动，并在移动 100px 后停止。

有什么想法如何创建循环吗？

这就是我想出的办法。我知道的不多。

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

原文

I'm trying to create an animation with an rectangle.
I want the rectangle to move in a loop from x=150 to x=50 and back to 150 and so on.

At the moment I can only move the rectangle forward and it stops after it moved 100px.

Any ideas how to create the loop ?

This is what I have come up with. not much Iknow.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

木落 2025-01-12 15:18:57

尝试这样的事情：

<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 来实现 效果。

Try with something like this:

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

As you can see the main idea here is using Sequence effect to force two Move animations to execute in a row and then looping this Sequence effect by setting its repeatCount property to 0.

回复收藏 0 原文

怪我闹别瞎闹 2025-01-12 15:18:57

我建议使用 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});
}

I would suggest using tweenlite animation library and not using the built-in animation options of Flex nor MXML for animation. Tweenlite has a lot more options and is very easy to use.

With the below code, you can see how the library works. The function moves your object rect to the position 65,117 with Sine.easeIn easing over a period of 1 second.

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

If you then use some additional parameters, you can create a loop, like this:

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

回复收藏 0 原文

~没有更多了~