¿Cuál es la fórmula para la transparencia combinada de dos imágenes transparentes superpuestas?

Question

Si quiero mostrar una imagen uniformemente semitransparente, y luego 'desvanecer' esta imagen, reemplazándola gradualmente con otra de la misma transparencia, mientras mantengo la transparencia combinada a un nivel constante durante la transición, ¿cómo puedo determinar qué transparencia dibujar las imágenes?

Por ensayo y error, dibujando imágenes transparentes de varios alfas una encima de la otra, he creado el siguiente gráfico, que muestra la transparencia de la imagen A en un eje y la transparencia de la imagen B en el otro. Las líneas 'isoalpha' muestran combinaciones de alfa que dan como resultado el mismo alfa en toda la línea. Cada línea es para un nivel diferente de alfa, con completamente transparente en la parte superior izquierda.

Puede ver que la fórmula que estoy buscando no es una transición lineal recta con alphaA + alphaB== alphaTarget.

¿Cuál es la fórmula matemática que estoy buscando?

Eje X: alfa de la imagen B (0-255 l-r). Eje Y: alfa de la imagen A (0-255 hacia abajo).

Answer 1

Las transparencias se multiplican .

transparency_new = transparency_a * transparency_b

Sin embargo, dado que la opacidad (alfa) es la inversa de la transparencia:

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

o:

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

Escale según corresponda si utiliza una ejecución alfa de 0 a 255 en lugar de 0 a 1.0

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

Repliqué su gráfico usando la fórmula anterior y Grapher.app: