Question

我想知道是否可以重复和重置一个循环。我使用TweenLite创建了3张图片的幻灯片动画。每个都有3秒的延迟。

6秒后，我希望这个循环重复，所以我有一个幻灯片。任何建议，因为到目前为止我已经结束了无限循环导致它崩溃。

var clips:Array = [image, image2, image3];
var i = 0;

while ( i < 4) {
    var timer = i;
    TweenLite.to(clips[i], 6, {x:300, ease:Linear.easeNone,delay:timer*3});
    i++;
}

Answer 1

循环将以程序可以同步的速度运行，锁定线程直到完成。这意味着任何基于时间的，都不应该处于循环中（因为循环没有时间概念）

我建议使用TweenLite中内置的complete回调。

//create a var to store which item is current
var curIndex:int = 0;

//animate the current item
next();

function next(delay:Number = 0):void {
    //when the tween is complete, call the 'tweenComplete` function and pass the curIndex as a parameter
    TweenLite.to(clips[curIndex], 2, {x: 300, ease:Linear.easeNone, onComplete: tweenComplete, onCompleteParams: [curIndex], delay: delay);

    //increment the current index, reset to 0 if out of range
    curIndex++;
    if(curIndex >= clips.length){
        curIndex = 0;
    }
}

function tweenComplete(index){
    next(); //animate the next item

    //get the previous item and reset it's x position (now that this new item is in place) 
    index--;

    //if index was 0, get the highest index instead
    if(index < 0) index = clips.length - 1;

    clips[index].x = -300; //whatever your default x value is.
}

Answer 2

将代码放入函数中：

function startAnimations():void
{
    for(var i:uint = 0; i < 4; ++i)
    {
        TweenLite.to(clips[i], 6, {x:300, ease:Linear.easeNone, delay:timer*3});
    }
}

然后在想要再次开始动画时调用该函数：

startAnimations();

要在间隔中执行此操作，请使用Timer

var timer:Tiemr = new Timer(6000); //6000 ms = 6s
timer.addEventListener(TimerEvent.TIMER, startAnimations);
timer.start();

这需要将函数的签名更改为

function startAnimations(e:TimerEvent = null):void

Answer 3

您应该考虑使用TimeLineLite。它是Greensock对动画进行排序的绝妙插件，并内置了动画排序，反转，暂停，重启等方法。

为了达到你想要的效果，你可以使用这样的东西（显然可以根据你的需要调整值/代码）：

{% for corresponding_task in corresponding_tasks %}
    {% for note in corresponding_task | create_html_for_deleting_notes %}
         {{ note }}
    {% endfor %}
{% endfor %}

注意TimeLineLite的import com.greensock.TimelineLite; private var timeLine:TimelineLite; private var clips:Array; private function animate():void { clips = [image1, image2, image3]; timeLine = new TimelineLite({onComplete:reset}); for (var i:uint = 0; i < clips.length; i++) { timeLine.to(clips[i], 3, {x:400, ease:Linear.easeNone, delay:i*3}); } timeLine.play(); } protected function reset():void { timeLine.restart(true); }方法。这将在补间完成时调用。

希望这能解决您的问题。

编辑：已更新至最新的插件代码。

Answer 4

使用 TweenMax： （即如果您可以支付额外的KB）

{{1}}

重复＆amp;重置循环

4 个答案: