平滑alpha交叉淡入淡出算法？

我的應用程序通過調整它們的alpha值而在各種媒體和文本層之間漸變。但是，當使用線性交叉淡入淡出時，亮度似乎在中途「下降」，然後消退。經過一番搜索之後，我發現this answer解釋了這個問題，但是建議的解決方案，一次只褪去一層，對我來說不起作用，因爲我使用的大多數圖層已經包含透明度。平滑alpha交叉淡入淡出算法？

Here's an example of the issue I'm having, in HTML/CSS (code below because SO requires it。

<style> 
body, html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    background-color: black; 
} 

.example { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
} 

#example1 { 
    background-color: red; 
    animation: 1s linear 0s fade infinite alternate; 
} 

#example2 { 
    background-color: red; 
    animation: 1s linear 1s fade infinite alternate; 
} 

@keyframes fade { 
    from {opacity: 0;} 
    to {opacity: 1;} 
} 
</style> 


<div id="example1" class="example"></div> 
<div id="example2" class="example"></div>

的兩個div應該淡化其混濁回來來回，得到一個固體紅色圖像的整個時間。相反，它似乎在亮度下降。

使用alpha創建平滑交叉淡入淡出的算法或公式是什麼？我正在使用OpenGL，如果這是相關的。（HTML/CSS片段只是展示問題的最簡單方法）。

來源

2016-07-21 Isaac Smith

那麼你如何顯示透明區域？這是你需要融合的顏色。或者更好。也混合alpha通道。 –

透明區域的alpha設置爲0.我只調整alpha通道，而不是其他任何通道。 –

看來，您可能只是想將「GL_CONSTANT_ALPHA」和「GL_ONE_MINUS_CONSTANT_ALPHA」用於混合功能。並用'glBlendColor'指定衰落時間。 –

對不起，但這是不可能的。

首先，您想要的公式定義爲here。我會在其他方面它拷貝到這裏：

outputColor = overAlpha * overColor + (1 - overAlpha) * underColor

如果我正確理解你的問題，你正在尋找一個周期函數f(t)管理Alpha過渡這樣的：

1 = f(t - 1) + (1 - f(t)) * f(t - 1) = f(t - 1) + f(t) - f(t - 1) * f(t)

的唯一功能滿足那個方程，至少according to wolfram alpha是常數1.如果你想在開始時它是零，並且無限循環，那麼這是行不通的。

除非你不想要一個週期性的函數，並且你只是想讓你的淡入淡定。上面的等式。

來源

2016-07-22 00:11:41

感謝您的解釋，我最終使用了CSS用於動畫的三次貝塞爾計時函數，它對我的目的看起來足夠好。 –

平滑alpha交叉淡入淡出算法？

回答

相關問題