Circular Intermediate с фоновым цветом в композиции реактивного ранца

Я хочу сделать круглую промежуточную полосу прогресса в компоновке реактивного ранца. Я попробовал какой-то фрагмент кода, но он не работает правильно для анимации круга. Я тоже пробовал этот ответ, но ничего не работает

           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 -> полукруг.

— 12.01.2023 14:25

О, извините, я должен перейти на меньшее, примерно на .25f что-то

— 12.01.2023 14:27

@GabrieleMariotti Я обновил код. Проблема в том, что анимация не работает.

— 12.01.2023 14:30

анимация не работает, потому что прогресс имеет фиксированное значение

— 12.01.2023 14:49

Так есть ли способ решить проблему?

— 12.01.2023 14:49

@GabrieleMariotti Я пытался удалить progress = .25f, тогда анимация работает, но я хочу получить ожидаемый результат

— 12.01.2023 14:54

Вы хотите иметь неопределенный прогресс, оживляющий 1/4 круга?

— 12.01.2023 14:59

да, я хочу, как вы упомянули.

— 12.01.2023 15:00

В этом случае вы не можете использовать CircularProgressIndicator, но вы должны использовать drawArc, а затем анимировать его.

— 12.01.2023 15:12

Любые ресурсы для этого, как оживить все это?

— 12.01.2023 15:14

android kotlin android-jetpack-compose android-jetpack

12.01.2023 14:21

Коллекции (ArrayList , HashSet , HashMap)

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В вашем случае вам нужен бесконечный переход, оживляющий дугу окружности.
Вы можете нарисовать дугу, используя drawArc, а затем повернуть ее, используя:

rotate(value) {
  // content is rotated by angle in degrees
}

Что-то вроде:

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())
                )
            }
        }

)

большое спасибо. Оно работает. У меня есть некоторые сомнения topLeft = Offset(diameterOffset, diameterOffset), что он делает? почему мы ставим offset?

— 12.01.2023 17:58

@VivekModi Таким образом, вы удаляете половину ширины обводки из общего диаметра, чтобы обе стороны имели прямоугольник с краями, совпадающими с серединой обводки фонового круга.

— 13.01.2023 07:32

Большое спасибо. Не могли бы вы помочь мне с этим вопросом

— 13.01.2023 22:46

12.01.2023 15:27