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

來源

2017-02-28 user3808123

不要在緊密循環一樣，改變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

來源

2017-02-28 03:15:57

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

}

來源

2017-02-28 03:19:55

Adob​​e Animate HTML5 alpha淡入

回答

相關問題

Adobe Animate HTML5 alpha淡入