在jetpack compose中显示时如何使文本数字动画化？

Question

我想用数字显示文本，我想要实现的是在显示文本时为该文本设置动画。动画是应该将计数器从零增加到目标值。我尝试使用animateIntAsState但它不起作用。

这就是我累的状态：

 val daysCounter by animateIntAsState(
        targetValue = days ,
        animationSpec = tween(
            durationMillis = 5000,
            easing = FastOutSlowInEasing
        )
    )

和文字：

        Text(
                text = "$daysCounter",
                fontSize = 40.sp,
                color = MaterialTheme.colors.onPrimary,
                fontWeight = FontWeight.Bold
            )

Answer 1

从animateIntAsState：

当提供的targetValue更改时，动画将自动运行。

您的动画不起作用，因为它targetValue是静态的。

第一次重组必须使用初始值完成，下一次重组可以传递目标值。例如，LaunchedEffect如果您需要在屏幕出现时立即（或有一些延迟）启动动画，则可以使用：

var days by remember { mutableStateOf(0) }
val daysCounter by animateIntAsState(
    targetValue = days,
    animationSpec = tween(
        durationMillis = 5000,
        easing = FastOutSlowInEasing
    )
)
LaunchedEffect(Unit) {
    days = 300
}

有关 Compose 中动画的更多信息可以在文档中找到。