Adobe Animate HTML5 alpha淡入

问题描述：

我正在使用while语句对影片剪辑的alpha属性进行淡入编程。Adobe Animate HTML5 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); 
     } 

}

许多thanks--

不要在紧密循环一样，改变DOM - 你不会看到它的发生是因为“渲染”不会发生直到你的JS代码完成 –

如果你想要很好的平滑“过渡”...尝试使用[CSS转换]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions） –

答

编辑：拉斐尔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();

这将通过fadeAmount每WAITTIME毫秒递减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);

这会通过fadeAmount每n帧递减α值。玩弄fadeAmount和n个变量来找到你喜欢的速度。更多信息上requestAnimationFrame()

查看文档：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

This在浏览器中运行良好，但OP不在浏览器环境中。 –

谢谢@RaphaelRafatpanah，我不知道adobe上下文在浏览器之外。我更新了使用setTimeout来反映这一点，因为它可以独立于浏览器的渲染周期使用。 –

'this'不会引用你在'setTimeout'内（或'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); 

}

Adob​​e Animate HTML5 alpha淡入

相关推荐

Adobe Animate HTML5 alpha淡入