I need to animate scale up image (and then scale down) and after this animation finishes, i need to ...

# compose

[Luka]

I need to animate scale up image (and then scale down) and after this animation finishes, i need to change image drawable and change its tint color. Getting lost in so many options https://developer.android.com/jetpack/compose/animation#animatable. Please help

[james]

hey Luka, I’ve done exactly this using updateTransition() and an enum to represent the animation state

in your situation you could do

enum class MyAnimState {
    Initial,
    ScaledUp,
    ScaledDown,
    Finished;

    fun next() = when (this) {
        Initial -> ScaledUp
        ScaledUp -> ScaledDown
        ScaledDown -> Finished
        Finished -> Initial
    }
}

using this and a when statement for each of your animatable values you can define values for each state, and by having something like:

if (transition.targetState == transition.currentState) {
    myAnimState = myAnimState.next()
}

you can automatically progress to the “next” state once each one has finished

[Luka]

Thx for help.
Now i can scale image with
val scale by transition.animateFloat( …)
and change tint with

val color by transition.animateColor(...)

How can i animate change of painterResource based on MyAnimState (image swap)?

[james]

you can do a simple image swap by checking your targetState in an AnimatedContent that is a parent of your image

[james]

there’s a helpful answer here actually: https://stackoverflow.com/questions/70956195/android-jetpack-compose-composable-change-image-source-with-animation