How to rotate a composable and add a progress listener to the rotation?

Question

I am trying to convert my View based code to Compose. I have a composable which takes an image (Painter) as argument and displays it using Image composable. What I want is that whenever the argument value changes, my Image should do a 360 degree rotation and the image should change while angle is approx. 180 degree (i.e. mid-way in the animation)

This is the composable I made.

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

Right now when the displayImage changes, the new image is displayed immediately without any animation (obviously). How can I achieve the desired animation?

The code that I am trying to convert looks like this:

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

score 5 · Accepted Answer · answered Oct 25 '21 at 10:55

It can be done using Animatable.

Compose animations are based on coroutines, so you can wait for the animateTo suspend function to complete, change the image and run another animation. Here's a basic example:

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)
    )
}

Output:

If you want to animate the changing images, you have to put two images in a Box and animate the opacity of both as they rotate using one more Animatable.

Thanks for the answer, let me try to code it. But here you have used both the image resources in the same composable. The `MyImage` composable that I had written accepts only one image (the new one), is there a way to remember the old value OR will I have to change the function definition and pass both the values? — Arpit Shukla, Oct 25 '21 at 11:01
@ArpitShukla sure, you can remember it with `remember`. Something like `var actualImage by remember(inputImage) { mutableStateOf(inputImage) }`, and then during animation you can do `actualImage = tmpImage`, and if you need to restore it - `actualImage = inputImage` — Phil Dukhov, Oct 25 '21 at 11:05

How to rotate a composable and add a progress listener to the rotation?

1 Answers1