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.如果你希望它在开始时为零，并且让它无限循环，那就不会起作用。

除非你不想要一个周期性的功能，否则你只想让你的褪色看起来有点好看。上面链接的等式。

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

1 个答案: