Compose Modifier

graphicsLayer

A [Modifier.

AnimateFadeIn

@Composable
fun AnimateFadeIn() {
    val animatedAlpha = remember { Animatable(0f) }
    Text(
        "Hello World",
        Modifier.graphicsLayer {
            alpha = animatedAlpha.value
            clip = true
        },
    )
    LaunchedEffect(animatedAlpha) { animatedAlpha.animateTo(1f) }
}

ChangeOpacity

@Composable
fun ChangeOpacity() {
    Text("Hello World", Modifier.graphicsLayer(alpha = 0.5f, clip = true))
}

CompositingStrategyModulateAlpha

@Composable
fun CompositingStrategyModulateAlpha() {
    Canvas(
        modifier =
            Modifier.size(100.dp)
                .background(Color.Black)
                .graphicsLayer(
                    alpha = 0.5f,
                    compositingStrategy = CompositingStrategy.ModulateAlpha,
                )
    ) {
        // Configuring an alpha less than 1.0 and specifying
        // CompositingStrategy.ModulateAlpha ends up with the overlapping region
        // of the 2 draw rect calls to blend transparent blue and transparent red
        // against the black background instead of just transparent blue which is what would
        // occur with CompositingStrategy.Auto or CompositingStrategy.Offscreen
        inset(0f, 0f, size.width / 3, size.height / 3) { drawRect(color = Color.Red) }
        inset(size.width / 3, size.height / 3, 0f, 0f) { drawRect(color = Color.Blue) }
    }
}