Wie lautet die Formel für die kombinierte Transparenz von zwei übereinander liegenden transparenten Bildern?

Question

Wenn ich ein einheitlich halbtransparentes Bild anzeigen und dann dieses Bild "ausblenden" möchte, indem ich es allmählich durch ein anderes mit derselben Transparenz ersetze, während ich die kombinierte Transparenz während des Übergangs konstant halte, wie bestimme ich dann, mit welcher Transparenz ich die Bilder zeichne?

Durch Ausprobieren - ich habe transparente Bilder verschiedener Alphas übereinander gezeichnet - habe ich das folgende Diagramm erstellt, das die Transparenz von Bild A auf einer Achse und die Transparenz von Bild B auf der anderen Achse zeigt. Die "Isoalpha"-Linien zeigen Kombinationen von Alphas, die entlang der gesamten Linie zu demselben Alpha führen. Jede Linie steht für eine andere Alphastufe, wobei oben links vollständig transparent ist.

Sie können sehen, dass die Formel, nach der ich suche, kein gerader linearer Übergang mit alphaA + alphaB == alphaTarget ist.

Wie lautet die mathematische Formel, nach der ich suche?

X-Achse - Alpha des Bildes B (0-255 l-r). Y-Achse - Alpha von Bild A (0-255 nach unten).

Answer 1

Transparentfolien multiplizieren .

transparency_new = transparency_a * transparency_b

Da die Deckkraft (Alpha) jedoch das Gegenteil von Transparenz ist:

1 - opacity_new = (1 - opacity_a) * (1 - opacity_b)

oder:

opacity_new = 1 - (1 - opacity_a) * (1 - opacity_b)

Skalieren Sie entsprechend, wenn Sie einen Alphawert von 0 bis 255 anstelle von 0 bis 1,0 verwenden.

alpha_new = 255 * (1 - (1 - alpha_a / 255) * (1 - alpha_b / 255))

Ich habe Ihr Diagramm mit der obigen Formel und Grapher.app nachgebaut: