Повторяющаяся анимация перевода в композиции

Question

Я хочу добиться анимации перевода, которая будет работать непрерывно, пока некоторые значения из сервера не остановят ее. Вот изображение того, что мне нужно достичь:

вы можете увидеть белую вертикальную линию над этим изображением. Мне нужно перевести его от начала до конца непрерывно [не туда и обратно]

Этот макет имеет Boxкоторый имеет серый цвет и внутри него находится LinearProgressIndicator. Таким образом, этот прогресс может быть любым, например, 50%,80% и т. д. И это изображение может анимироваться только до индикатора выполнения.

См. код ниже:

       Box(modifier = Modifier
           .fillMaxWidth()
            .height(50.dp)
            .constrainAs(main_progress_bar) {
                top.linkTo(parent.top, 16.dp)
                start.linkTo(parent.start, 16.dp)
                end.linkTo(parent.end, 16.dp)
                width = Dimension.fillToConstraints
            }
            .background(getAppColors().gray, RoundedCornerShape(10.dp))
        ) {

                val offsetAnimation: Dp by animateDpAsState(
                100.dp,
                infiniteRepeatable(
                    animation = tween(
                        800,
                        easing = LinearEasing,
                        delayMillis = 1_500,
                    ),
                    repeatMode = RepeatMode.Restart,
                )
          
                LinearProgressIndicator(

                modifier = Modifier
                    .fillMaxWidth((viewModel.mainPercentage / 100))
                    .height(50.dp)
                    .clip(
                        RoundedCornerShape(
                            topStart = 10.dp,
                            topEnd = 0.dp,
                            bottomStart = 10.dp,
                            bottomEnd = 0.dp
                        )
                    ),
                backgroundColor = getAppColors().gray,
                color = getAppColors().greenColor,
                progress = 1f,
            )


            Image(
                painter = rememberDrawablePainter(
                    ContextCompat.getDrawable(
                        context,
                        R.drawable.ic_animation_icon
                    )
                ),
                contentDescription = "image",
                modifier = Modifier
                    .absoluteOffset(x = offsetAnimation)
            )

          }

Этот код не помогает работать должным образом. Я пробовал с некоторыми другими ответами, но я не могу добиться именно того, что мне нужно. Пробовал это . Это полезно, но как мне получить здесь обратный вызов окончания анимации, чтобы я мог перезапустить его, или как мне управлять анимацией из самого viewModel? Это основная проблема, с которой я сталкиваюсь.

Answer 1

Решение на основе официального образца :

      val infiniteTransition = rememberInfiniteTransition()
val offsetAnimation by infiniteTransition.animateValue(
    initialValue = 0.Dp,
    targetValue = 100.Dp,
    typeConverter = Dp.VectorConverter,
    animationSpec = infiniteRepeatable(
        animation = tween(800, easing = LinearEasing, delayMillis = 1_500),
        repeatMode = RepeatMode.Restart
    )
)

Я не уверен, как это будет работать, если targetValue изменится.