如何在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
            )

- Jeevan Rupacha

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动画的更多信息。

- Phil Dukhov

---

我们可以有一个带小数点的双精度值像这样动起来吗？ - Harish Padmanabh

@HarishPadmanabh，你肯定可以为浮点数添加动画效果，有animateFloatAsState函数可用。由于在Compose中浮点数在各个地方都被使用，这应该足够了。你还可以查看其他函数animate*AsState，包括基本的animateValueAsState，它允许你为任何类型添加动画效果 - 你只需要提供一种将其转换为要通过动画进行变化的值向量的方法即可。 - Phil Dukhov

如何使数字在动画中上下滚动？ - Harish Padmanabh