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.
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..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.