jetpack compose 中带有背景颜色的圆形中间体答案

【问题标题】：Circular Intermediate with background color in jetpack composejetpack compose 中带有背景颜色的圆形中间体
【发布时间】：2023-01-12 22:27:55
【问题描述】：

我想在 Jetpack Compose 中制作圆形中间进度条。我尝试了一些代码，但它无法正确地为圆圈设置动画。我也试过这个answer，但没有任何效果

           val strokeWidth = dimensionResource(R.dimen.stroke)
           Box(modifier = Modifier.fillMaxSize()) {
            CircularProgressIndicator(
                progress = .25f,
                modifier = Modifier
                    .align(Alignment.Center)
                    .drawBehind {
                        drawCircle(
                            Cloudy,
                            radius = size.width / 2 - strokeWidth.toPx() / 2,
                            style = Stroke(strokeWidth.toPx())
                        )
                    },
                color = Aqua,
                strokeWidth = strokeWidth
             )
          }

实际产量

动画不工作

预期产出

【问题讨论】：

我不明白为什么预期的输出应该是这样的。你的进步 = 0.5 -> 半圈。
哦，对不起，我必须改成 less 大约 .25f 的东西
@GabrieleMariotti 我更新了代码。问题是动画不工作。
动画不起作用，因为进度具有固定值
那么我们有办法解决这个问题吗？

标签： android kotlin android-jetpack-compose android-jetpack

【解决方案1】：

在您的情况下，您想要一个无限过渡动画圆弧。
您可以使用 drawArc 绘制圆弧，然后使用 rotate 绘制圆弧：

val transition = rememberInfiniteTransition()
val currentRotation by transition.animateValue(
    0F,
    targetValue = 360F,
    Float.VectorConverter,
    infiniteRepeatable(
        animation = tween(
            durationMillis = 5000,
            easing = LinearEasing
        )
    )
)


Box(modifier = Modifier
        .size(100.dp)
        .drawBehind {

            //background fixed circle
            drawCircle(
                color = LightGray,
                radius = size.width / 2 - strokeWidth.toPx() / 2,
                style = Stroke(strokeWidth.toPx())
            )

            val diameterOffset = strokeWidth.toPx() / 2
            val arcDimen = size.width - 2 * diameterOffset

            //arc with indeterminate animation
            rotate(currentRotation) {
                drawArc(
                    color = Red,
                    startAngle = 45F,
                    sweepAngle = 90F,
                    useCenter = false,
                    topLeft = Offset(diameterOffset, diameterOffset),
                    size = Size(arcDimen, arcDimen),
                    style = Stroke(strokeWidth.toPx())
                )
            }
        }

)

【讨论】：