unveilIn

This animates an unveiling scrim over the content as it enters.

unveilIn

Function

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

This animates an unveiling scrim over the content as it enters.

Parameters

animationSpecthe animation used for the scrim, spring by default.
initialColorthe starting 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 EnterTransition, 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") }
        }
    }
}