How can I control the duration of AnimatedVisibility in compose?

Viewed 1052

I have used compose AnimatedVisibility in my project, But the anim is to short for my need.
Is there a related API?

2 Answers

Here is an example taken from codelabs. You can add your own animation specs with the durationMillis of each animation, one for entering, and one for exiting:

 AnimatedVisibility(
    visible = shown,
    enter = slideInVertically(
        // Enters by sliding down from offset -fullHeight to 0.
        initialOffsetY = { fullHeight -> -fullHeight },
        animationSpec = tween(durationMillis = 150, easing = LinearOutSlowInEasing)
    ),
    exit = slideOutVertically(
        // Exits by sliding up from offset 0 to -fullHeight.
        targetOffsetY = { fullHeight -> -fullHeight },
        animationSpec = tween(durationMillis = 250, easing = FastOutLinearInEasing)
    )
) {
    Surface(
        modifier = Modifier.fillMaxWidth(),
        color = MaterialTheme.colors.secondary,
        elevation = 4.dp
    ) {
        Text(
            text = stringResource(R.string.edit_message),
            modifier = Modifier.padding(16.dp)
        )
    }
}

Well this is one way

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimatedVisibilityMark2(content: @Composable () -> Unit, visible: Boolean, durationMillis: Int) {
    AnimatedVisibility(
        visible = visible,
        enter = fadeIn(
            animationSpec = keyframes {
                this.durationMillis = durationMillis
            }
        ),
        exit = fadeOut(
            animationSpec = keyframes {
                this.durationMillis = durationMillis
            }
        )
    ){
        content()
    }
}

Related