Javascript Adobe动画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值每waitTime毫秒递减一次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帧通过fadeAmount减少alpha值。使用fadeAmount和n变量查找您喜欢的速率

有关更多信息，请参阅有关

requestAnimationFrame（）

的文档：

尝试以下操作：

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

function textFadeOut()
{
  this.fertilizerAnimation.gotoAndStop(1);
  var that = this;
  (function textFadeOut (i) {          
    setTimeout(function () {   
      that.textOverlay.alpha -= 0.01;
      console.log(that.textOverlay.alpha);
      if (--i) textFadeOut(i);
    }, 10) // the animation will last 10ms * 100 iterations (1 second)
  })(100); 

}

尝试此功能：

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

和使用：

var faded_obj = this;
var fadeAmount = 0.025;
var waitTime = 30;
transition_process (fadeAmount,waitTime,faded_obj);

---

不要像那样在一个很紧的循环中更改DOM——你不会看到它发生，因为如果你想要平滑的“转换”，在JS代码完成之前“渲染”是不会发生的。。。尝试在浏览器中使用此选项会很好，但是OP不在浏览器环境中。谢谢@RaphaelRafatpanah，我不知道adobe上下文在浏览器之外。我使用setTimeout进行了更新以反映这一点，因为它可以独立于浏览器的渲染周期使用。

此

不会引用

setTimeout

（或

requestAnimationFrame

的回调）中所期望的内容。@RaphaelRafatpanah再次感谢！更新以反映范围的变化。