Animation APIs in Compose seem very complicated. I...

# compose

[Mehdi Haghgoo]

Animation APIs in Compose seem very complicated. I literally don't understand any of what the inline docs say!

[Kirill Grouchnikov]

Have you looked at any of the samples?

[Kirill Grouchnikov]

https://github.com/androidx/androidx/tree/androidx-main/compose/animation/animation/samples/src/main/java/androidx/compose/animation/samples

[Bryan Herbst]

That’s also an area that has evolved rapidly over the last few releases, so you might find some older documentation or samples floating around.

[Mehdi Haghgoo]

For example, what is AnimationSpec? Maybe, it is not that hard, but I am sure it is not similar much to view animation APIs we were used to.

[Kirill Grouchnikov]

I don't think you should expect every single API in Compose to directly map to the older Android APIs

[bruno.aybar]

Yeah, plus a lot of the animation APIs heavily rely on State s and snapshot changes, which is a very Compose-y concept

[Thiago]

It looks complicated because you are required to learn composite functions and their life cycle. Yes, you should forget everything you've learned so far about UI and learn from scratch.
This is the way!

[Rafs]

@Thiago This is the way!

[Doris Liu]

Compose animations are indeed very different than the existing View-based animations, because we wanted to provide animation APIs that work nicely in the new declarative UI. It was a deliberate decision to not constrain ourselves to the View-based animations, and instead embrace the declarative paradigm. Fun fact: about two years ago, we gathered up a number of developers and presented the two options as we started working on compose animation: 1) Retro-fit View-based animations in compose, or 2) A clean slate for compose animation. Spoiler alert: 2) got the vast majority votes. 🙂

Given that compose animation system is tightly integrated in Compose, it helps to understand how Compose works as a whole first (e.g. state management, composable lifecycle, etc) as others have mentioned. If you would like to then learn about the different building blocks of the animation system and how to navigate the animation APIs, I have good news for you - we have some tutorials coming very soon! 😉

[Mehdi Haghgoo]

That's amazing @Doris Liu thank you. I love animations 😍

[Thiago]

I have to say: "we need urgent a compose animation tutorial" but is not required for now because still in development. A basic sample is that it's hard find a good and simple way to animate from 0f to 1f and reverse it. The available versions are deprecated (animate, animatedFloat) or animteFloatAsState have sample with param based only.
A sample in the docs seems not working on alpha12 is animateFloatAsState . I'm changing visible value and the red box still visible. Also the animation is been fired when I toggle the value only.

[Doris Liu]

@Thiago Yes, animateFloatAsState is a state-based animation, which reacts the targetValue change to fire the animation. The sample seems to have the alpha modifier and background reversed, which needs to be fixed. Please feel free to file a bug when things don't work as expected.

Sounds like the API for your use case of 0f->1f->0f could be either Animatable or rememberInfiniteTransition depending on what other controls of the animation you might need. 🙂