AS3 - 如何等待 for 循环内的补间动画完成？

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 不起作用，因为它在第一组坐标上触发。我也试过触发 when

i == pointsArray.length

但是循环在动画完成之前完成了好几秒。我想避免使用计时器。

Answer 1

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

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

Answer 2

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

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，这使得对多个补间进行排序非常容易。

AS3 - 如何等待 for 循环内的补间动画完成？

AS3 - How do you wait for a tween inside a for loop to complete?

actionscript-3

for-loop

gsap