my application fades between various media , text layers adjusting alpha values. however, when using linear crossfade brightness appears "dip" halfway through , fade up. after searching found this answer explains issue, suggested solution, fading 1 layer @ time, won't work me since of layers use contain transparency.
here's example of issue i'm having, in html/css (code below because 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 { {opacity: 0;} {opacity: 1;} } </style> <div id="example1" class="example"></div> <div id="example2" class="example"></div> the 2 divs should fade opacities in forth, resulting in solid red image entire time. instead, appears dip in brightness.
what algorithm or formula creating smooth crossfade using alpha? i'm using opengl, if that's relevant. (the html/css snippet easiest way of demonstrating issue).
sorry, it's not possible.
first off, equation want defined here. i'll copy here in other terms:
outputcolor = overalpha * overcolor + (1 - overalpha) * undercolor if understand question correctly, you're looking periodic function f(t) alpha transition such that:
1 = f(t - 1) + (1 - f(t)) * f(t - 1) = f(t - 1) + f(t) - f(t - 1) * f(t) the function satisfies equation, @ least according wolfram alpha constant 1. , won't work if want 0 @ beginning, , have loop infinitely.
unless don't want periodic function, , want fades kinda nice. equation linked above.
Comments
Post a Comment