如何在Jetpack Compose中实现居中对齐的动画？

Question

我在玩Jetpack Compose基础教程时想在Row中添加一个居中的Icon，但无法进行动画。能否实现平滑的动画效果，在内容展开时图标始终垂直居中对齐？目前它只是"跳动"。类似于animateContentSizemodifier的一些东西。尝试过这个, 但无法使其工作，因为在那个示例中它从起始位置对齐到结束位置，而不是居中。

附有视频以澄清我的意思。检查每行左侧的星形图标。

@Composable
fun CardContent(name: String) {
    var expanded by remember { mutableStateOf(false) }

    Row(
        modifier = Modifier
            .padding(12.dp)
            .animateContentSize(
                animationSpec = spring(
                    dampingRatio = Spring.DampingRatioMediumBouncy,
                    stiffness = Spring.StiffnessLow
                )
            ),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            imageVector = Icons.Filled.Star, "",
        )
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(12.dp)
        ) {
            Text(text = "Hello, ")
            Text(
                text = name,
                style = MaterialTheme.typography.h4.copy(
                    fontWeight = FontWeight.ExtraBold
                )
            )
            if (expanded) {
                Text(
                    text = ("Composem ipsum color sit lazy, " +
                            "padding theme elit, sed do bouncy. ").repeat(4),
                )
            }
        }
        IconButton(onClick = { expanded = !expanded }) {
            Icon(
                imageVector = if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
                contentDescription = if (expanded) {
                    stringResource(R.string.show_less)
                } else {
                    stringResource(R.string.show_more)
                }

            )
        }
    }
}

- moyo

Answer 1

你可以试试这个，我修改了你的代码，将 Text 包裹在 AnimatedVisibility 范围内，虽然它不完全像你的示例 gif 那样工作，但它会使 Text 在垂直方向上平滑地动画化。

@Composable
fun CardContent(name: String) {
    var expanded by remember { mutableStateOf(false) }
    Row(
        modifier = Modifier
           .padding(12.dp)
            .animateContentSize(
                animationSpec = spring(
                    dampingRatio = Spring.DampingRatioMediumBouncy,
                    stiffness = Spring.StiffnessLow
                )
            ),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            imageVector = Icons.Filled.Star, "",
        )
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(12.dp)
        ) {
            Text(text = "Hello, ")
            Text(
                text = name,
                style = MaterialTheme.typography.h4.copy(
                    fontWeight = FontWeight.ExtraBold
                )
            )
            AnimatedVisibility(
                visible = expanded,
                enter = expandVertically(
                    expandFrom = Alignment.CenterVertically
                ),
                exit = shrinkVertically(
                    shrinkTowards = Alignment.CenterVertically
                ),
            ) {
                Text(
                    text = ("Composem ipsum color sit lazy, " +
                            "padding theme elit, sed do bouncy. ").repeat(4),
                )
            }
        }
        IconButton(onClick = { expanded = !expanded }) {
            Icon(
                imageVector = if (expanded) Icons.Filled.ExpandLess else 
Icons.Filled.ExpandMore,
                contentDescription = null
            )
        }
    }
}

随着动画参数的增加，

enter = expandVertically(
      expandFrom = Alignment.CenterVertically
),
exit = shrinkVertically(
      shrinkTowards = Alignment.CenterVertically
)

动画将保证以直线垂直方向执行。

- z.g.y