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毫秒的fadeAmount减少alpha值。使用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()上的文档：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Answer 2

试试这个：

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); 

}

Answer 3

尝试此功能：

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);

Adobe Animate HTML5 alpha淡入

3 个答案: