如何让Jetpack Compose的animateContentSize从中心开始动画？

Compose组件本身是从中心开始动画的，但其中的Button在组件动画过程中是从左上角移动到中心。希望Button能从中心开始动画，尝试给Button和Box都添加了.animateContentSize，但Button仍呈现从左上到中心的动画效果。相关代码如下：

@Composable
fun TopScreen(
    isScaffold: MutableState<Boolean>,
){
    AnimatedVisibility(
        visible = !isScaffold.value,
        modifier = Modifier
            .fillMaxSize()
            .animateContentSize(
                animationSpec = tween(durationMillis = 500, easing = LinearEasing)
            )
    ){
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.LightGray),
            contentAlignment = Alignment.Center
        ){
            Button(
                onClick = {
                    isScaffold.value = true
                },
                modifier = Modifier

            ) {
                Text(text = "GO TO BOTTOM SCREEN")
            }
        }
    }
}

问题根源在于AnimatedVisibility默认的进入动画是滑入效果，导致内容从左上角偏移进入，而非中心缩放。.animateContentSize是用于处理组件大小变化的动画，不适用当前场景。只需给AnimatedVisibility指定中心缩放的进入/退出动画即可：

@Composable
fun TopScreen(
    isScaffold: MutableState<Boolean>,
){
    AnimatedVisibility(
        visible = !isScaffold.value,
        // 指定中心缩放的进入/退出动画
        enter = scaleIn(
            animationSpec = tween(durationMillis = 500, easing = LinearEasing),
            // 锚点设为中心，确保从中心开始缩放
            initialScale = 0f,
            pivot = Alignment.Center
        ),
        exit = scaleOut(
            animationSpec = tween(durationMillis = 500, easing = LinearEasing),
            pivot = Alignment.Center
        ),
        modifier = Modifier.fillMaxSize()
    ){
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.LightGray),
            contentAlignment = Alignment.Center
        ){
            Button(
                onClick = {
                    isScaffold.value = true
                }
            ) {
                Text(text = "GO TO BOTTOM SCREEN")
            }
        }
    }
}

关键说明 #

• 移除了无用的.animateContentSize，它只负责组件自身尺寸变化时的过渡，和进入/退出动画无关。
• 通过scaleIn/scaleOut并设置pivot = Alignment.Center，强制动画以中心为锚点进行缩放，这样Button就会从中心逐渐显示/消失，而非从左上角移动过来。

内容的提问来源于stack exchange，提问作者Raj