平滑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交叉淡入淡出算法？

回答

相关问题