问题描述:

I was wondering if it is possible to Repeat and Reset a loop. I'm using TweenLite to create a slide animation of 3 images. Each with a delay of 3 second between them.

After 6 seconds I want this loop to repeat itself so I have a slideshow. Any suggestions because so far I have ended up with endless loops causing it to crash.

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

}

网友答案:

Loops will run as fast as the program can, synchronously, locking the thread until completed. That means that anything time based, should not be in a loop (as loops have no concept of time)

I would suggest using the complete callback built into TweenLite.

//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.
}
网友答案:

Put the code in a function:

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

Then call the function whenever you want to start the animation again:

startAnimations();

To do so in an interval, use a Timer

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

Which would require a changing the signature of the function to

function startAnimations(e:TimerEvent = null):void
网友答案:

You should look into using TimeLineLite. It's a fantastic plugin from Greensock to sequence animations and has built in methods for sequencing animations, reversing, pausing, restarting etc.

To achieve what you want you could use something like this (obviously tweak the values/code to your needs):

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

Notice the onComplete method for the TimeLineLite. This will be called when the tweens are completed.

Hope this solves your issue.

EDIT: Updated to latest plugin code.

网友答案:

Using TweenMax: (i.e. if you can afford a few extra KBs)

var clips:Array = [image, image2, image3];
var timeline = new TimelineMax({ repeat: -1 });
timeline.staggerTo(clips, 6, { x: 300, ease: Linear.easeNone }, 3);
相关阅读:
Top