javascript - Adobe Animate HTML5 alpha 淡入

Question

我正在使用 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);
        }

}

非常感谢--

Answer 1

编辑:正如 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();

这将每 waitTime 毫秒将 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);

这将每 n 帧将 alpha 值减少 fadeAmount。尝试使用 fadeAmount 和 n 变量来找到您喜欢的速率。

有关详细信息，请参阅有关requestAnimationFrame() 的文档:https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame