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

Question

我的应用程序通过调整其 alpha 值在各种媒体和文本层之间淡入淡出。然而，当使用线性交叉淡入淡出时，亮度似乎在中途“下降”，然后又淡出。经过一番搜索，我找到了 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。如果您希望它在开始时为零并无限循环，那将不起作用。

除非您不想要一个周期函数，而您只是希望您的淡入淡出看起来还不错。上面链接的等式。