https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
w

Wajahat Karim

10/09/2020, 6:54 PM
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
❤️ 3
🎉 22
z

Zach Klippenstein (he/him) [MOD]

10/09/2020, 7:01 PM
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.
➕ 1
👀 1
w

Wajahat Karim

10/09/2020, 7:11 PM
Thanks zacklipp. Yeah I had to do some work to make GIFs. I always look for GIFs in the GitHub readme of repositories.
g

Guy Bieber

10/09/2020, 7:23 PM
Very cool! Any easy spin animation recommendations?
I want to spin a fan control.
image
z

Zach Klippenstein (he/him) [MOD]

10/09/2020, 7:51 PM
I bet you could create a thing that would create a gif of an animated composable by providing a custom frame clock.
w

Wajahat Karim

10/09/2020, 7:57 PM
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
a

Afzal Najam

10/09/2020, 8:12 PM
Love it! I wanted to learn about animations with Compose so this is perfect!
g

Guy Bieber

10/09/2020, 8:15 PM
animated gifs don’t seem to work with the latest compose.
We have a really cool mutagent animation for batteries that comes up static.
grrr
Got the rotating image working. Here is the code:
Copy 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
        )
👏 1
p

Prashant Priyadarshi

10/10/2020, 2:31 AM
hi, @Wajahat Karim bottom app bar using animated visibility is really useful.. great work overall
👍 1
a

Afzal Najam

10/10/2020, 7:08 AM
@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
👍 1
🔥 1
w

Wajahat Karim

10/10/2020, 8:44 AM
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. 🙏
👍 1
@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.
@Guy Bieber Heard at droidcon yesterday that Animated Vector Drawables support is coming to Compose, so GIF will probably follow then
👍 1
🎉 1
p

Prashant Priyadarshi

10/10/2020, 8:50 AM
@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
even simple things like recycler view for showing items in a list was complicated
Powered by