android - 如何在 Jetpack Compose 中为 LinearProgressIndicator 的进度设置动画？

Question

我有一个 LinearProgressIndicator正确显示当前进度。现在我想要动画进度，我认为这将是 super 简单的 animateFloatAsState .好吧，不知道我不是在摸索什么，但是使用下面的代码，进度不是动画的，而是立即显示在正确的位置。

@Composable
fun MyIndicator() {
    val progressAnimDuration = 1500
    val progressAnimation by animateFloatAsState(
        targetValue = 0.35f
        animationSpec = tween(durationMillis = progressAnimDuration, easing = FastOutSlowInEasing)
    )
     LinearProgressIndicator(
        progress = progressAnimation,
        ...
        modifier = Modifier           
           .fillMaxWidth()
           .clip(RoundedCornerShape(20.dp)). // Rounded edges
    )
}

因此，每当我在屏幕上显示该组件时，我都希望进度能够动画到其正确的进度状态。但相反，进度不是动画的，而是立即以正确的进度状态显示。
这里有什么问题？ :)

Answer 1

我有一个类似的问题，在我的情况下，我使用 LaunchedEffect 将进度从零更新到所需值

@Composable
fun MyIndicator(indicatorProgress: Float) {
   var progress by remember { mutableStateOf(0f) }
    val progressAnimDuration = 1500
    val progressAnimation by animateFloatAsState(
        targetValue = indicatorProgress, 
        animationSpec = tween(durationMillis = progressAnimDuration, easing = FastOutSlowInEasing)
    )
    LinearProgressIndicator(
        modifier = Modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(20.dp)), // Rounded edges
        progress = progressAnimation
    )
    LaunchedEffect(indicatorProgress) {
        progress = indicatorProgress
    }
}