等待 Flex 效果完成

Question

我是一名 Flex 新手，负责增强现有应用程序。其中一项改进是让当前显示时间的字段在显示时间和日期之间平滑地来回淡出。

我知道正确的做法是将字体文件嵌入到应用程序中，这样我就可以直接淡入淡出标签。如果可以的话，我会尽量避免这种情况，因为我希望我的更改尽可能不引人注目。

我想出了一个我认为合理的解决方法：创建一个“隐私屏幕”，恰好是时钟背景的确切大小、形状和颜色；将其 alpha 初始化为 0；然后在更改时间/日期时，淡入隐私屏幕，进行更改，然后再次淡出屏幕。

代码如下所示：

    var targets:Array = new Array();
    targets.push(this.privacyScreen);
    this.effectFadeIn.play(targets);
    this.mylabel.text = "I am a date and/or time";
    this.effectFadeOut.play(targets);

...关键组件如下所示：

<mx:Label text="" id="mylabel" width="100%" height="100%" x="0" y="0" color="0xff0000"/>
<mx:Canvas id="privacyScreen" width="100%" height="100%" x="0" y="0" alpha="1" backgroundColor="{myConfiguration.backgroundColor}"/>
<mx:Fade id="effectFadeIn" alphaFrom="0.0" alphaTo="1.0" duration="250"/>
<mx:Fade id="effectFadeOut" alphaFrom="1.0" alphaTo="0.0" duration="250"/>

我相信经验丰富的 Flex 设计师已经知道，这段代码是由美味的新鲜挤压制成的。FAIL。执行将等待淡入效果完成的基本假设是错误的，并且在淡入仍在进行时，淡出效果显然被忽略了。

所以我想我有两个相关的问题：

1. 是否可以在等待效果运行完成时暂停执行？
2. 这种方法是否可行，或者它只是从上到下都在做错事？

提前感谢任何人提供的任何见解。

（我提前承认，我越是尝试通过实践来学习这一点，我就越意识到我需要利用网上的一些trainingresources。）

Answer 1

我刚刚玩了一下你的代码，这是你要找的吗？

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    creationComplete="onComplete();">

    <mx:Script>
        <![CDATA[
            private var targets:Array = new Array();
            private function onComplete():void {
                targets.push(canv);
                effectFadeOut.play(targets);
            }
            private function onFadeInEnd():void {
                effectFadeOut.play(targets);
            }
            private function onFadeOutEnd():void {
                effectFadeIn.play(targets);
            }
        ]]>
    </mx:Script>

    <mx:Label text="{(new Date()).toString()}" id="lbl" x="0" y="0" color="0xff0000"/>
    <mx:Canvas id="canv" width="100%" height="{lbl.height+5}" x="0" y="0" backgroundColor="#000000"/>

    <mx:Fade id="effectFadeIn" alphaFrom="0.0" alphaTo="1.0" duration="250"
        effectEnd="onFadeInEnd();" />
    <mx:Fade id="effectFadeOut" alphaFrom="1.0" alphaTo="0.0" duration="250"
        effectEnd="onFadeOutEnd();" />

</mx:WindowedApplication>

希望有帮助:)

Answer 2

您的代码在标签消失时执行。 this.effectFadeIn.play() 不会等待它完成。我会在稍后需要调用的代码行中添加一个 setTimeout 调用，或者更好的是，将它们放在另一个函数中。然后，在一定的时间间隔后再次调用该函数。

import flash.utils.*;

private function FadeIn () : void {
    var targets:Array = new Array();
    targets.push(this.privacyScreen);
    this.effectFadeIn.play(targets);
    this.mylabel.text = "I am a date and/or time";
    setTimeout (function (): void {FadeOut (targets);}, effectFadeIn.duration); // Function and duration
}
private function FadeOut (targets : Array) : void {
    this.effectFadeOut.play(targets);
    setTimeout (FadeIn (), this.effectFadeOut.duration;
}

我很确定这应该可行...