在撰写中重复翻译动画答案

【问题标题】：Repeating translation animaiton in compose在撰写中重复翻译动画
【发布时间】：2022-02-14 22:27:50
【问题描述】：

我想实现一个翻译动画，它将连续运行，直到服务器的某些值停止它。这是我需要实现的图像：

你可以在上面看到一条白色的垂直线，这是一张图片。我需要从头到尾不断地翻译它[不是来回]

这个布局有一个灰色的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)
            )

          }

此代码无法按预期工作。我尝试了其他一些答案，但我无法完全满足我的需要。 Tried this 这很有帮助，但是如何在此处获取动画结束回调以便重新启动它，或者如何从 viewModel 本身控制动画？这是我面临的主要问题。

【问题讨论】：

标签： android android-jetpack-compose jetpack-compose-animation

【解决方案1】：

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

我不确定如果 targetValue 发生变化它将如何工作..

【讨论】：