Jetpack Compose Arc 进度条动画答案

【问题标题】：Jetpack Compose Arc Progress Bar AnimationJetpack Compose Arc 进度条动画
【发布时间】：2022-11-22 08:48:15
【问题描述】：

如何创建这样的弧形进度条动画

目前我已经使用 Canvas 绘制弧线并使用 animateFloatAsState API 向进度条添加动画。

// e.g. oldScore = 100f  newScore = 350f
// Suppose 250 points are into one level

@Composable
fun ArcProgressbar(
    modifier: Modifier = Modifier,
    oldScore: Float,
    newScore: Float,
    level: String,
    startAngle: Float = 120f,
    limitAngle: Float = 300f,
    thickness: Dp = 8.dp
) {

    var value by remember { mutableStateOf(oldScore) }

    val sweepAngle = animateFloatAsState(
        targetValue = (value / 250) * limitAngle,  // convert the value to angle
        animationSpec = tween(
            durationMillis = 1000
        )
    )

    LaunchedEffect(Unit) {
        delay(1500)
        value = newScore
    }

    Box(modifier = modifier.fillMaxWidth()) {

        Canvas(
            modifier = Modifier
                .fillMaxWidth(0.45f)
                .padding(10.dp)
                .aspectRatio(1f)
                .align(Alignment.Center),
            onDraw = {
                // Background Arc
                drawArc(
                    color = Gray100,
                    startAngle = startAngle,
                    sweepAngle = limitAngle,
                    useCenter = false,
                    style = Stroke(thickness.toPx(), cap = StrokeCap.Square),
                    size = Size(size.width, size.height)
                )

                // Foreground Arc
                drawArc(
                    color = Green500,
                    startAngle = startAngle,
                    sweepAngle = sweepAngle.value,
                    useCenter = false,
                    style = Stroke(thickness.toPx(), cap = StrokeCap.Square),
                    size = Size(size.width, size.height)
                )
            }
        )
        
        Text(
            text = level,
            modifier = Modifier
                .fillMaxWidth(0.125f)
                .align(Alignment.Center)
                .offset(y = (-10).dp),
            color = Color.White,
            fontSize = 82.sp
        )

        Text(
            text = "LEVEL",
            modifier = Modifier
                .padding(bottom = 8.dp)
                .align(Alignment.BottomCenter),
            color = Color.White,
            fontSize = 20.sp
        )
    }
}

但它只制作一次动画，我希望它在进度 > limitAngle 时再次从头开始制作动画，但仍然无法像 gif 中那样弄清楚如何做。有人有想法吗？谢谢！

【问题讨论】：

标签： android android-jetpack-compose android-animation android-progressbar jetpack-compose-animation

【解决方案1】：

不确定我是否理解正确，但您是否尝试过使用 newScore 和/或 oldScore 作为 key/keys 来重新触发 LaunchedEffect？

LaunchedEffect(newScore, oldScore) { // use newScore and/or oldScore instead of Unit
    delay(1500)
    value = newScore
}

【讨论】：