Question

我使用for {循环和tweenlite中的点数组绘制一个大的形状，如http://www.flashperfection.com/tutorials/Animated-line-drawing-using-TweenLite-in-AS3-22013.html

for(var i:uint = 0; i < pointsArray.length; i++){
TweenLite.to(dot2, .05, {x:pointsArray[i].x,
  y:pointsArray[i].y,
  delay:i*.05,
  overwrite:false,
 onUpdate:updateHandler});
}
function updateHandler():void{
lineAnim.graphics.lineTo(dot2.x, dot2.y);
lineAnim.graphics.moveTo(dot2.x, dot2.y);
}

我想在继续之前完成动画，但是当完整动画完成时我无法找到通知的方法。 onComplete不起作用，因为它在第一组coords上触发。

时我也试过触发

i == pointsArray.length

但循环在动画完成前完成多秒。我想避免使用计时器。

Answer 1

您可以通过执行以下操作来执行异步循环：

var curIndex:int = 0; //a var to hold the current index of the points array
tweenItem();

//a function to call every time a tween is finished
function tweenItem(){
    if(curIndex >= pointsArray.length){
        //all done, do something
        return;
    }

    TweenLite.to(dot2, .05, {
        x:pointsArray[curIndex].x,
        y:pointsArray[curIndex].y,
        onUpdate:updateHandler,
        onComplete: tweenItem //call this function again once the tween completes
    });

    curIndex++; //incriment the index
}

现在，您可以省去麻烦，只需使用由同一作者制作的TimelineLite，这样可以非常轻松地对多个补间进行排序。

Answer 2

正如我在评论中所说，你需要使用回调。

我对TweenLite不是很熟悉，但是你可以将onComplete回调添加到最后一次调用吗？像这样：

for(var i:uint = 0; i < pointsArray.length; i++){
    var extraArguments:Object = {
        x:pointsArray[i].x,
        y:pointsArray[i].y,
        delay:i*.05,
        overwrite:false,
        onUpdate:updateHandler
    };
    // add in the onComplete callback only if it's the last loop.
    if (i == pointsArray.length - 1 ) {
        extraArguments.onComplete = yourOnCompleteFunction;
    }
    TweenLite.to(dot2, .05, extraArguments);
}

AS3 - 如何在for循环中等待补间完成？

2 个答案: