https://kotlinlang.org logo
#compose
Title
# compose
m

Mehdi Haghgoo

02/23/2021, 2:18 PM
Animation APIs in Compose seem very complicated. I literally don't understand any of what the inline docs say!
k

Kirill Grouchnikov

02/23/2021, 2:22 PM
Have you looked at any of the samples?
b

Bryan Herbst

02/23/2021, 2:29 PM
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.
m

Mehdi Haghgoo

02/23/2021, 2:33 PM
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.
k

Kirill Grouchnikov

02/23/2021, 2:35 PM
I don't think you should expect every single API in Compose to directly map to the older Android APIs
☝️ 9
b

bruno.aybar

02/23/2021, 3:17 PM
Yeah, plus a lot of the animation APIs heavily rely on
State
s and snapshot changes, which is a very Compose-y concept
👀 1
t

Thiago

02/23/2021, 5:12 PM
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!
r

Rafs

02/23/2021, 5:30 PM
@Thiago This is the way!
d

Doris Liu

02/23/2021, 7:54 PM
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! 😉
😍 1
❤️ 9
m

Mehdi Haghgoo

02/23/2021, 9:32 PM
That's amazing @Doris Liu thank you. I love animations 😍
❤️ 1
t

Thiago

02/23/2021, 9:57 PM
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.
d

Doris Liu

02/23/2021, 10:41 PM
@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. 🙂
❤️ 2
3 Views