What's the formula for the combined transparency of two overlaid transparent images?

2
votes

If I want to display one uniformly semi-transparent image, and then 'fade out' this image, gradually replacing it with another of the same transparency, while maintaining the combined transparency at a constant level during the transition, how do I determine what transparency to draw the images?

By trial and error - drawing transparent images of various alphas on top of each other - I've come up with the graph below, showing transparency of image A on one axis and transparency of image B on the other. The 'isoalpha' lines show combinations of alpha that result in the same alpha all the way along the line. Each line is for a different level of alpha, with fully transparent at the top-left.

You can see that the formula I'm looking for is not a straight linear transition with alphaA + alphaB == alphaTarget.

What's the mathematical formula I am looking for?

Alpha cross-fade graph

X axis - alpha of image B (0-255 l-r). Y axis - alpha of image A (0-255 downwards).

1
graphicsalphaalphablendingimaging

1 Answers

7
votes

Transparencies multiply.

transparency_new = transparency_a * transparency_b

However since opacity (alpha) is the inverse of transparency:

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

or:

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

Scale as appropriate if using alpha runing from 0 - 255 instead of 0 to 1.0

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

I replicated your graph using the above formula and Grapher.app:

enter image description here