底部导航动画由于某种原因在动画开始之前添加白色背景

Question

我尝试从底部向按钮导航外观幻灯片添加动画

有代码：

@Composable
private fun BottomNavImpl() {
    Scaffold(
        bottomBar = {
            var isBottomBarVisible: Boolean by remember { mutableStateOf(false) }

            LaunchedEffect(Unit) {
                delay(2000)
                isBottomBarVisible = true
            }

            AnimatedVisibility(
                visible = isBottomBarVisible,
                enter = slideInVertically(
                    initialOffsetY = { it },
                    animationSpec = tween(
                        durationMillis = 500,
                        easing = FastOutSlowInEasing
                    )
                ),
                exit = slideOutVertically(
                    targetOffsetY = { it },
                    animationSpec = tween(
                        durationMillis = 300,
                        easing = FastOutSlowInEasing
                    )
                )
            ) {
                NavigationBar(
                    containerColor = Color.Red,
                ) {
                    repeat(3) {
                        NavigationBarItem(
                            icon = {
                                Icon(
                                    modifier = Modifier,
                                    painter = painterResource(android.R.drawable.ic_menu_add),
                                    contentDescription = null,
                                )
                            },
                            selected = false,
                            onClick = { }
                        )
                    }
                }
            }
        },
        content = { paddingValues ->
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(paddingValues)
                    .background(Color.Green)
            ) {

            }
        }
    )
}

它提供了这样的结果：

所以，问题是白色背景首先出现全高，然后是动画。

我错过了什么？

Answer 1

发现“paddingValues”中的问题一旦“bottomBar”可见性发生变化，“Scaffold”会更新“paddingValues”，导致“background”在动画开始之前出现。

修复也是动画“paddingValues”：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()


        setContent {
            Test_delete_itTheme {
                var isBottomBarVisible: Boolean by remember { mutableStateOf(false) }

                LaunchedEffect(Unit) {
                    while (true) {
                        delay(2000)
                        isBottomBarVisible = !isBottomBarVisible
                    }
                }

                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    bottomBar = {
                        AnimatedVisibility(
                            modifier = Modifier,
                            visible = isBottomBarVisible,
                            enter = slideInVertically(
                                initialOffsetY = { it },
                                animationSpec = tween(
                                    durationMillis = 500,
                                    easing = FastOutSlowInEasing
                                )
                            ),
                            exit = slideOutVertically(
                                targetOffsetY = { it },
                                animationSpec = tween(
                                    durationMillis = 300,
                                    easing = FastOutSlowInEasing
                                )
                            )
                        ) {
                            NavigationBar(
                                containerColor = Color.Red,
                            ) {
                                repeat(3) {
                                    NavigationBarItem(
                                        modifier = Modifier,
                                        icon = {
                                            Icon(
                                                modifier = Modifier,
                                                painter = painterResource(android.R.drawable.ic_menu_add),
                                                contentDescription = null,
                                            )
                                        },
                                        selected = false,
                                        onClick = { }
                                    )
                                }
                            }
                        }
                    }
                ) { innerPadding ->
                    val targetPadding: PaddingValues = if (isBottomBarVisible) {
                        innerPadding
                    } else {
                        PaddingValues(
                            top = innerPadding.calculateTopPadding(),
                            bottom = 0.dp,
                            start = innerPadding.calculateStartPadding(LayoutDirection.Ltr),
                            end = innerPadding.calculateEndPadding(LayoutDirection.Ltr)
                        )
                    }

                    val animatedStartPadding by animatePaddingValue(targetPadding.calculateStartPadding(LayoutDirection.Ltr), isBottomBarVisible)
                    val animatedTopPadding by animatePaddingValue(targetPadding.calculateTopPadding(), isBottomBarVisible)
                    val animatedEndPadding by animatePaddingValue(targetPadding.calculateEndPadding(LayoutDirection.Ltr), isBottomBarVisible)
                    val animatedBottomPadding by animatePaddingValue(targetPadding.calculateBottomPadding(), isBottomBarVisible)

                    Box(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(
                                start = animatedStartPadding,
                                top = animatedTopPadding,
                                end = animatedEndPadding,
                                bottom = animatedBottomPadding
                            )
                            .background(Color.Green)
                    ) {

                    }
                }
            }
        }
    }
}

@Composable
private fun animatePaddingValue(targetValue: Dp, isBottomBarVisible: Boolean): androidx.compose.runtime.State<Dp> {
    val animationSpec = tween<Dp>(
        durationMillis = if (isBottomBarVisible) 500 else 300,
        easing = FastOutSlowInEasing
    )
    return animateDpAsState(targetValue = targetValue, animationSpec = animationSpec, label = "")
}