Jetpack compose 动画剪辑问题答案

【问题标题】：Jetpack compose animation clipping problemJetpack compose 动画剪辑问题
【发布时间】：2021-07-16 09:13:44
【问题描述】：

我正在尝试在内容更改时创建动画。问题是在动画过程中行的高度会发生变化，所以它会上下跳跃，即使我将剪辑设置为 false。我正在尝试从 Google 复制看起来像

的示例

更新： 问题似乎出在 alignBy(LastBaseline) 上。如果我删除它，它会起作用。

组合看起来像这样：

@Composable
fun StatisticsRow() {
    var count by remember { mutableStateOf(0) }

    Column {
        Row(
            modifier = Modifier.fillMaxWidth().padding(start = 16.dp, end = 16.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.alignBy(LastBaseline).weight(1f)
            ) {
                AnimatedDays(count)
                Text("Days", style = MaterialTheme.typography.body1)
            }
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.alignBy(LastBaseline).weight(1f)
            ) {
                Box {
                    val image: Painter = painterResource(id = R.drawable.ic_baseline_medal_24)
                    Image(painter = image, contentDescription = "")
                }
                Text("Achievements", style = MaterialTheme.typography.body1)
            }
        }
        Button(onClick = { count++ }) { Text("Click me") }
    }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
private fun AnimatedDays(count: Int) {
    AnimatedContent(targetState = count,
        transitionSpec = {
            if (targetState > initialState) {
                slideInVertically({ height -> height }) + fadeIn() with
                        slideOutVertically({ height -> -height }) + fadeOut()
            } else {
                slideInVertically({ height -> -height }) + fadeIn() with
                        slideOutVertically({ height -> height }) + fadeOut()
            }.using(SizeTransform(clip = false))
        }
    ) { targetCount ->
        Text(targetCount.toString(), style = MaterialTheme.typography.h4)
    }
}

【问题讨论】：

如果删除它可以工作，那么问题是什么？
当我写这个问题时，我不知道解决方案是什么。这就是为什么我更新了帖子说我发现了问题所在。 ;)
哦。如果是这种情况，则可以选择“自我回答”问题。您应该回答问题，以便其他人知道问题已解决。谢谢！
嘿@Mackan，你能分享这个上下动画的完整代码吗？
@SreekantShenoy 你在 AnimatedDays 函数中有完整的代码。 :) MARSK：我会看看我是否可以编辑帖子并找到“自我回答”选项。

标签： android-jetpack-compose

【解决方案1】：

问题是 alignBy(LastBaseline)。删除它，代码就可以工作了。

【讨论】：