veilOut

Function
Common
@ExperimentalAnimationApi
public fun veilOut(
    animationSpec: FiniteAnimationSpec<Color> = spring(stiffness = Spring.StiffnessMediumLow),
    targetColor: Color = Color.Black.copy(alpha = 0.5f),
    matchParentSize: Boolean = false,
): ExitTransition

This animates a veiling scrim over the content as it exits.

Parameters
animationSpec the animation used for the scrim, spring by default.
targetColor the target color of the scrim.
matchParentSize whether the scrim should match the parent size. When matchParentSize is true, the veil is applied independently from all other transforms and matches the parent size. When matchParentSize is false, the veil is applied first and thus is affected by other transforms. Note: The veil may be clipped if a clip modifier is used on the same layout as the ExitTransition, even when matchParentSize is true.

Code Examples

AnimatedContentVeil

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimatedContentVeil() {
    var visible by remember { mutableStateOf(true) }
    Column {
        Button(onClick = { visible = !visible }) { Text("Toggle") }
        AnimatedContent(
            targetState = visible,
            transitionSpec = {
                if (targetState) {
                    (slideInHorizontally { it } togetherWith veilOut()).apply {
                        targetContentZIndex = 1f
                    }
                } else {
                    unveilIn() togetherWith slideOutHorizontally { it }
                }
            },
        ) { isVisible ->
            if (isVisible) {
                Text(modifier = Modifier.fillMaxSize().background(Color.Red), text = "Page 2")
            } else {
                Text(modifier = Modifier.fillMaxSize(), text = "Page 1")
            }
        }
    }
}

AnimatedVisibilityVeil

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimatedVisibilityVeil() {
    var visible by remember { mutableStateOf(true) }
    Column(modifier = Modifier.background(Color.White)) {
        Button(onClick = { visible = !visible }) { Text("Toggle") }
        AnimatedVisibility(
            visible = visible,
            enter = unveilIn(initialColor = Color.White),
            exit = veilOut(targetColor = Color.White),
        ) {
            Box(Modifier.fillMaxSize().padding(30.dp).background(Color.Blue)) { Text("Content") }
        }
    }
}