如何在 Jetpack Compose 中為 LinearProgressIndicator 的進度設置動畫？

Question

我有一個LinearProgressIndicator可以正確顯示當前進度。 現在我想要動畫進度，我認為這對於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
    }
}

Answer 2

我也遇到了和你一樣的問題，最后在animateFloatAsState中發現了一個很重要的參數visibilityThreshold ，你必須把它設置成0.001f才能生效。