Jetpack Compose recomposition animation

Question

Is there any easy way to animate Composables appearing/hiding? I tried to implement this using AnimatedVisibility and AnimatedContent, but in my particular case it looked rather cumbersome. The content on the screen is dynamic and depends on the value of the variable, when changing this variable I need to show / hide the corresponding Composables with animation.

contentType.forEach { type ->
                when (type) {
                    ContentType.Type1 -> {
                        ComposableForType1()
                    }
                    ContentType.Type2 -> {
                        ComposableForType2()
                    }
                    ContentType.Type3 -> {
                        ComposableForType3()
                    }
                    ContentType.Type4 -> {
                        ComposableForType4()
                    }
                }
}
// Some logic to change the content type

Answer 1

You can use AnimatedVisibility to show/hide one specific view.

In the case where you want to animate some state between different views, you can use the Crossfade animation:

Crossfade(targetState = type) { type ->
    when (type) {
        ContentType.Type1 -> {
            ComposableForType1()
        }
        ContentType.Type2 -> {
            ComposableForType2()
        }
        ContentType.Type3 -> {
            ComposableForType3()
        }
        ContentType.Type4 -> {
            ComposableForType4()
        }
    }
}

This method will definitely work if in case when type is a normal mutable value.

I'm not sure it will work in your case, because you also have an array of data. If you only change the value in the array, Crossade will work, but if you also add or delete an element, this animation will be harder to implement.

Check out more about Compose animations in documentation