Repeating translation animaiton in compose

Question

I want to achieve a translation animation which will run continuously till some values from sever will stop it. Here is the image of what I need to achieve :

you can see a white vertical line over this which is an image. I need to translate it from start to end continuosly [not back and forth]

This layout has a Box which is gray colored and inside it there is a LinearProgressIndicator. So this progress can be anything like 50%,80% etc. And this image can only animate till the progress bar.

See the code below :

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

          }

This code is not helping working as expected. I tried with some other answer's but I can't achieve exactly what I need. Tried this It is helpful but how do I get animation end callback here so I can restart it or how do I control animation from viewModel itself? That's the main problem I am facing.

score 0 · Answer 1 · answered Feb 14 '22 at 14:27

Solution based on official sample:

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

I'm not sure how it will work if targetValue changes..

Repeating translation animaiton in compose

1 Answers1