如何在 Jetpack Compose 中实现翻译动画？答案

【问题标题】：How to Achieve Translate Animation in Jetpack Compose?如何在 Jetpack Compose 中实现翻译动画？
【发布时间】：2021-11-23 07:14:32
【问题描述】：

我正在尝试在 Jetpack compose 中实现翻译动画，但我无法找到合适的来源。任何人都可以帮助我在 Jetpack compose 中实现翻译动画，我可以在其中手动设置开始和编辑位置..

【问题讨论】：

这里如何定义“位置”？关于其他可组合或使用全局偏移？请具体说明您的要求。
实际上我正在尝试使用动画将视图从 X 起始位置设置为 Y 位置。
实际上我已经使用过渡动画实现了这一点，但我无法为其指定起始位置...
贴出你已有的代码。
能否请您参考一些文章等

标签： android kotlin android-jetpack-compose android-jetpack

【解决方案1】：

jetpack compose 中翻译动画的替代方案是偏移动画是的，我是通过偏移动画来实现的。我将下面的代码详细分享给 cmets，以便读者更容易理解

// Courtine Scope to Run the animation in thread
val coroutineScope = rememberCoroutineScope()
val offsetX = remember { Animatable(0f) }
val offsetY = remember { Animatable(0f) }

 Image(
            painter = rememberDrawablePainter(
                ContextCompat.getDrawable(
                    context,
                    R.drawable.image
                )
            ),
            contentDescription = "s", contentScale = ContentScale.Crop,
            modifier = Modifier
                .offset {
                    IntOffset(
                        offsetX.value.toInt(),
                        offsetY.value.toInt()
                    )
                }
                .width(300.dp)
                .height(300.dp)
        )
//Finally run the animation on the Click of your button or whenever you wants to start it...

  coroutineScope.launch {

       launch {
                    offsetXFirst.animateTo(
                    targetValue = targetValue,
                    animationSpec = tween(
                    durationMillis = 2000,
                    delayMillis = 0))}

                launch {
                offsetYFirst.animateTo(
                targetValue = size.height.toFloat(),
                animationSpec = tween(
                durationMillis = 2000,
                delayMillis = 0))}
   }

【讨论】：