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

Question

我的应用程序通过调整其 alpha 值在各种媒体和文本层之间淡入淡出。但是，当使用线性交叉渐变时，亮度会在中途显示为 "dip"，然后逐渐变暗。经过一番搜索后，我发现 this answer 可以解释该问题，但是建议的解决方案（一次只淡化一层）对我不起作用，因为我使用的大部分图层已经包含透明度。

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 片段只是演示该问题的最简单方法）。

Answer 1

抱歉，这不可能。

首先，您想要的方程式已定义 here。我将在此处以其他方式复制：

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

如果我对你的问题的理解正确，你正在为你的 alpha 转换寻找一个周期函数 f(t) 这样：

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。如果你想让它在开始时为零，并让它无限循环，那是行不通的。

除非你不想要一个周期性函数，而你只是想让你的淡入淡出看起来有点漂亮。上面链接的等式。

Answer 2

this other question 上对此主题有一些很好的讨论。

确实没有完美的解决方案，除了阶跃函数，但您可以稍微减轻影响。重要的是缓动函数在相对“高”点交叉，而不是 0.5。请参阅 this answer.

处的图表

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

Algorithm for smooth alpha crossfade?

algorithm

math

alpha