[英]Repeating translation animaiton in compose
I want to achieve a translation animation which will run continuously till some values from sever will stop it.我想实现一个翻译 animation 它将连续运行直到来自服务器的某些值将停止它。 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
.这个布局有一个灰色的
Box
,里面有一个LinearProgressIndicator
。 So this progress can be anything like 50%,80% etc. And this image can only animate till the progress bar.所以这个进度可以是 50%、80% 等任何东西。而且这个图像只能动画到进度条。
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?
试过这很有帮助,但如何在此处获得 animation 结束回调以便重新启动它,或者如何从 viewModel 本身控制 animation? 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..如果 targetValue 发生变化,我不确定它将如何工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.