javascript - Adobe Animate HTML5 alpha淡入

我正在使用while语句为电影剪辑的alpha属性编程淡入。
它看起来很有效，但运行速度非常快（几乎是瞬间的）。有没有办法在一段时间内设置淡入度，或者延迟while循环？

this.textOverlay.closeButton.addEventListener("click", textFadeOut.bind(this));

function textFadeOut()
{
    this.fertilizerAnimation.gotoAndStop(1);

    while(this.textOverlay.alpha>=0){
        this.textOverlay.alpha-=.01;
        console.log(this.textOverlay.alpha);
        }

}

非常感谢--

最佳答案

编辑：正如Raphael Rafatpanah指出的，requestAnimationFrame()在浏览器中不起作用。我在推荐的时候不明白上下文。setTimeout()不是特定于浏览器的，可能是您的最佳选择。
编辑2:修复范围错误

var fadeAmount = 0.01;
var waitTime = 250; // milliseconds == 0.25 seconds
var textOverlay = this.textOverlay;

function textFade () {
    setTimeout(function () {
        if (textOverlay.alpha >= 0) {
            textOverlay.alpha -= fadeAmount;
            textFade();
        }
    }, waitTime);
}

textFade();

这将使alpha值每等待毫秒递减一次fadeAmount。使用fadeAmount和waitTime变量寻找您喜欢的速率。
如果您在浏览器中，则可以使用requestAnimationFrame（）和循环计数器，该计数器将动画绑定到浏览器的渲染循环。

var fadeAmount = 0.01;
var n = 24;
var textOverlay = this.textOverlay;

function textFade () {
    requestAnimationFrame(function (cycle) {
        if (textOverlay.alpha >= 0) {
           textOverlay.alpha -= fadeAmount;
        }

        if (cycle % n !== 0) {
            cycle++;
            textFade(cycle);
        }
    });
}

// Call with initial cycle value:
textFade(0);

这将使alpha值每n帧递减一次fadeAmount。使用fadeAmount和n个变量来寻找您喜欢的速率。
有关详细信息，请参阅requestAnimationFrame()上的文档：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame