Hey folks, I wanted to play with animations in Compose. And I found that there are several ways to d...

# compose

[Wajahat Karim]

Hey folks, I wanted to play with animations in Compose. And I found that there are several ways to do it. But I couldn't find good comparisons and reasoning behind those. It got me confused and curious. That's why I put together different methods and prepared a talk on creating animations in Compose. I gave it at droidcon EMEA today. Just wanted to share it with you. Here are the slides and demo repository.

Slides: https://slides.com/wajahatkarim/composeanimations

Github: https://github.com/wajahatkarim3/droidcon2020

[Zach Klippenstein (he/him) [MOD]]

these demos are great!! just reading descriptions of animations in code is nowhere near as fun as seeing actual GIFs of them in action beside the code.

[Wajahat Karim]

Thanks zacklipp. Yeah I had to do some work to make GIFs. I always look for GIFs in the GitHub readme of repositories.

[Guy Bieber]

Very cool! Any easy spin animation recommendations?

[Guy Bieber]

I want to spin a fan control.

[Guy Bieber]

image

[Zach Klippenstein (he/him) [MOD]]

I bet you could create a thing that would create a gif of an animated composable by providing a custom frame clock.

[Wajahat Karim]

I think this would be a fantastic idea. I will try to find some time to do this and see if I get any luck

[Afzal Najam]

Love it! I wanted to learn about animations with Compose so this is perfect!

[Guy Bieber]

animated gifs don’t seem to work with the latest compose.

[Guy Bieber]

We have a really cool mutagent animation for batteries that comes up static.

[Guy Bieber]

grrr

[Guy Bieber]

Got the rotating image working. Here is the code:

val animRotation = animatedFloat(initVal = 0f)
        onActive {
            animRotation.animateTo (
                targetValue = 360f,
                anim = repeatable (
                    iterations = AnimationConstants.Infinite,
                    animation = tween (
                        durationMillis = 1000,
                        easing = LinearEasing
                    )
                )
            )
        }
        Image(
            modifier = Modifier.drawLayer(rotationZ = animRotation.value),
            asset = fanSettingIconMap.get(mDataModel.fanSetting)!!,
            alignment = Alignment.Center
        )

[Prashant Priyadarshi]

hi, @Wajahat Karim bottom app bar using animated visibility is really useful.. great work overall

[Afzal Najam]

@Wajahat Karim sent a PR your way for the exploding Fab. Unless, for some reason, I'm the only one having this issue.

https://github.com/wajahatkarim3/droidcon2020/pull/1

[Wajahat Karim]

Thank you @Afzal Najam . I was actually looking into it and had plan to fix this after my talk at droidcon due to time issue. PR looks awesome and going to merge it. Thank you. 🙏

[Wajahat Karim]

@Prashant Priyadarshi Glad that you liked it. It was fun to build it. It took less than 100 lines of code and like 30 mins or so. Compose is really powerful.

[Wajahat Karim]

@Guy Bieber Heard at droidcon yesterday that Animated Vector Drawables support is coming to Compose, so GIF will probably follow then

[Prashant Priyadarshi]

@Wajahat Karim, right, I always hated the xml way of doing ui and the amount of code one had to write.

I feel that compose is going to be a big big change

[Prashant Priyadarshi]

even simple things like recycler view for showing items in a list was complicated