如何旋转可组合项并将进度侦听器添加到旋转中？

Question

我正在尝试将基于视图的代码转换为 Compose。我有一个可组合项，它将图像 (Painter) 作为参数并使用 Image 可组合项显示它。我想要的是，每当参数值发生变化时，我的图像应该进行 360 度旋转，并且图像应该在角度约为 360 度时发生变化。 180度（即动画中途）

这是我制作的可组合项。

@Composable
fun MyImage(displayImage: Painter) {
    Image(
        painter = displayImage,
        contentDescription = null,
        modifier = Modifier
            .size(36.dp)
            .clip(CircleShape)
    )
}

现在当 displayImage 改变时，新图像会立即显示，没有任何动画（很明显）。如何实现所需的动画效果？

我尝试转换的代码如下所示：

fun onImageChange(imageRes: Int) {
    ObjectAnimator.ofFloat(imageView, View.ROTATION, 0f, 360f)
        .apply {
            addUpdateListener {
                if (animatedFraction == 0.5f) {
                    imageView.setImageResource(imageRes)
                }
            }
            start()
        }
}

Answer 1

可以使用 Animatable 来完成。

Compose 动画是基于协程的，所以你可以等待animateTo 挂起函数完成，改变图像和运行 另一个动画。这是一个基本示例：

var flag by remember { mutableStateOf(true) }
val resourceId = remember(flag) { if (flag) R.drawable.profile else R.drawable.profile_inverted }
val rotation = remember { Animatable(0f) }
val scope = rememberCoroutineScope()

Column(Modifier.padding(30.dp)) {
    Button(onClick = {
        scope.launch {
            rotation.animateTo(
                targetValue = 180f,
                animationSpec = tween(1000, easing = LinearEasing)
            )
            flag = !flag
            rotation.animateTo(
                targetValue = 360f,
                animationSpec = tween(1000, easing = LinearEasing)
            )
            rotation.snapTo(0f)
        }
    }) {
        Text("Rotate")
    }
    Image(
        painterResource(id = resourceId),
        contentDescription = null,
        modifier = Modifier
            .size(300.dp)
            .rotate(rotation.value)
    )
}

输出：

如果您想为不断变化的图像制作动画，您必须将两张图像放在一个 Box 中，并在它们旋转时使用另外一张 Animatable.

为它们的不透明度设置动画