等到两个图像之间的过渡完成

Question

我正在为 Blackberry Playbook 开发一个 ActionScript 3.0 应用程序。

我用 Loader 类加载了十二张图片。我使用 Event.ENTER_FRAME 使用此事件处理程序淡入和淡出图像：

private function onEnterFrame(event:Event):void
{
    imageToFront.alpha += 0.1; // slow fade
    imageToBack.alpha -= 0.1;

    if( imageToFront.alpha >= 1.0 )
    {
        imageToFront.alpha = 1.0;

        // hide the first image
        imageToBack.alpha = 0.0;
        imageToBack.visible = false;

        // remove the enter frame event listener
        stage.removeEventListener( Event.ENTER_FRAME, onEnterFrame );
    }
}

当用户点击图片时，它会抛出以下点击处理程序：

private function onImageClicked(event:MouseEvent):void
{
    switch((event.currentTarget as Loader).name)
    {
        case imageCell11Back.name:
            imageToFront = imageCell11Front;
            imageToBack = imageCell11Back;
            break;
        case imageCell11Front.name:
            imageToFront = imageCell11Back;
            imageToBack = imageCell11Front;
            break;
        case imageCell12Back.name:
            imageToFront = imageCell12Front;
            imageToBack = imageCell12Back;
            break;
        case imageCell12Front.name:
            imageToFront = imageCell12Back;
            imageToBack = imageCell12Front;
            break;
        case imageCell13Back.name:
            imageToFront = imageCell13Front;
            imageToBack = imageCell13Back;
            break;
        case imageCell13Front.name:
            imageToFront = imageCell13Back;
            imageToBack = imageCell13Front;
            break;
        case imageCell21Back.name:
            imageToFront = imageCell21Front;
            imageToBack = imageCell21Back;
            break;
        case imageCell21Front.name:
            imageToFront = imageCell21Back;
            imageToBack = imageCell21Front;
            break;
        case imageCell22Back.name:
            imageToFront = imageCell22Front;
            imageToBack = imageCell22Back;
            break;
        case imageCell22Front.name:
            imageToFront = imageCell22Back;
            imageToBack = imageCell22Front;
            break;
        case imageCell23Back.name:
            imageToFront = imageCell23Front;
            imageToBack = imageCell23Back;
            break;
        case imageCell23Front.name:
            imageToFront = imageCell23Back;
            imageToBack = imageCell23Front;
            break;
    }
    stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
    imageToFront.visible = true;
}

我有以下问题：

如果用户在前一张图片尚未达到 alpha = 1.0 之前点击另一张图片，则会留下该图片的 alpha 小于 1.0。

换句话说，我必须让 onEnterFrame 函数将 alpha 设置为 1.0。

有什么想法吗？

我尝试过stage.hasEventListener(Event.ENTER_FRAME)，但它不起作用。

Answer 1

尝试在 imageToFront 和 imageToBack 上设置事件侦听器，如下所示：

imageToFront.removeEventListener(Event.ENTER_FRAME, fadeIn);
imageToFront.addEventListener(Event.ENTER_FRAME, fadeIn);

imageToBack.removeEventListener(Event.ENTER_FRAME, fadeOut);
imageToBack.addEventListener(Event.ENTER_FRAME, fadeOut);

淡入淡出的功能应该是这样的：

private function fadeIn(event : Event) : void {
    var currentLoader : Loader = event.target as Loader;
    currentLoader.alpha += .1;

    if(currentLoader.alpha >= 1) {
        currentLoader.removeEventListener(Event.ENTER_FRAME, fadeIn);
    }
}

private function fadeOut(event : Event) : void {
    var currentLoader : Loader = event.target as Loader;
    currentLoader.alpha -= .1;

    if(currentLoader.alpha (inf)= 0) {
        currentLoader.visible = false;
        currentLoader.removeEventListener(Event.ENTER_FRAME, fadeOut);
    }
}

** 将 (inf) 替换为

对于补间值，您应该查看不同的补间引擎，例如 TweenLite。

Answer 2

我的解决方案：

private function onEnterFrame(event:Event):void
{
    imageToFront.alpha += 0.1; // slow fade
    imageToBack.alpha -= 0.1;

    if( imageToFront.alpha >= 1.0 )
    {
        imageToFront.alpha = 1.0;

        // hide the first image
        imageToBack.alpha = 0.0;
        imageToBack.visible = false;

        // remove the enter frame event listener
        stage.removeEventListener( Event.ENTER_FRAME, onEnterFrame );
        faddingCard = false;
    }
}

当用户点击图片时，它会抛出以下点击处理程序：

private function onImageClicked(event:MouseEvent):void
{
    if (faddingCard) return;

    switch((event.currentTarget as Loader).name)
    {
        case imageCell11Back.name:
            imageToFront = imageCell11Front;
            imageToBack = imageCell11Back;
            break;
        case imageCell11Front.name:
            imageToFront = imageCell11Back;
            imageToBack = imageCell11Front;
            break;
        case imageCell12Back.name:
            imageToFront = imageCell12Front;
            imageToBack = imageCell12Back;
            break;
        case imageCell12Front.name:
            imageToFront = imageCell12Back;
            imageToBack = imageCell12Front;
            break;
        case imageCell13Back.name:
            imageToFront = imageCell13Front;
            imageToBack = imageCell13Back;
            break;
        case imageCell13Front.name:
            imageToFront = imageCell13Back;
            imageToBack = imageCell13Front;
            break;
        case imageCell21Back.name:
            imageToFront = imageCell21Front;
            imageToBack = imageCell21Back;
            break;
        case imageCell21Front.name:
            imageToFront = imageCell21Back;
            imageToBack = imageCell21Front;
            break;
        case imageCell22Back.name:
            imageToFront = imageCell22Front;
            imageToBack = imageCell22Back;
            break;
        case imageCell22Front.name:
            imageToFront = imageCell22Back;
            imageToBack = imageCell22Front;
            break;
        case imageCell23Back.name:
            imageToFront = imageCell23Front;
            imageToBack = imageCell23Back;
            break;
        case imageCell23Front.name:
            imageToFront = imageCell23Back;
            imageToBack = imageCell23Front;
            break;
    }
    faddingCard = true;
    stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
    imageToFront.visible = true;
}

我添加了一个 faddingCard 布尔类变量来控制何时抛出 onImageClick。