veilOut

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

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

animationSpecthe animation used for the scrim, spring by default.
targetColorthe target color of the scrim.
matchParentSizewhether 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") }
        }
    }
}