https://kotlinlang.org logo
a

Archie

09/06/2020, 4:41 PM
is there a way to animate/create transition for
Composable
s getting "disposed". When changing state in compose it is usually done this way:
Copy code
Surface(color = selectorExpandedColor, elevation = 3.dp) {
        when (currentSelector) {
            InputSelector.EMOJI -> EmojiSelector(onTextAdded, focusRequester)
            <http://InputSelector.DM|InputSelector.DM> -> NotAvailablePopup(onCloseRequested)
            InputSelector.PICTURE -> FunctionalityNotAvailablePanel()
            InputSelector.MAP -> FunctionalityNotAvailablePanel()
            InputSelector.PHONE -> FunctionalityNotAvailablePanel()
            else -> { throw NotImplementedError() }
        }
    }
(Note: Code above is taken from
JetChat
) But doing so, creates a jarring experience where contents just pops-out and pops-in in an instant. Is it possible to trigger/create transition or animation when changing states (animate composable out and then animate composable coming in)? Is there any guide for this out there?
j

jaqxues

09/06/2020, 4:42 PM
you could wrap it inside an animation
an example of this would be Crossfade
Copy code
Crossfade(current = currentTab) {
                when (it) {
                    Fragments.HOME_FRAG -> HomeScreen()
                    Fragments.ABOUT_US_FRAG -> AboutUsScreen()
                }
            }
a

Archie

09/06/2020, 4:57 PM
Wow Im really missing out on these documentations! Thank you very much!
👍 1
a

Adam Powell

09/06/2020, 5:26 PM
The docs are very much WIP 🙂 If you can tell us what you searched for or how you tried to find this sort of thing that didn't lead to what you were looking for, we can give that info to the docs team for any later design work on the site
s

Sergey Y.

09/06/2020, 6:49 PM
https://kotlinlang.slack.com/archives/CJLTWPH7S/p1599259370042000 @Adam Powell Hi. Recently I was searching how to animate translations of views in Compose. I wanted to animate view translation by
x-axis
in range from
X
to
X1
. In general, I achieved the desired result but I think the implementation was far from ideal. I wanted to see more examples of animation API usage. I am having difficulty with understanding the analogy of
View.animate().translateX(...)
in Compose. Also, I was wondering how to use the
AnimatedFloat
or
transitionDefinition
with dynamic values for states, etc. Thanks.
a

Adam Powell

09/06/2020, 7:13 PM
the strange impedance mismatches you're running into are why I would like to make two specific API changes to some of the things you're using: 1.
animate
should return a
State<T>
- that's what it's using internally anyway and you shouldn't need to bounce it into another
MutableState<T>
via composition. 2.
Modifier.offset
should accept a lambda block that returns the offset when needed, so you can freely use
State<T>
in expressions and have the observation pushed to layout-positioning time rather than moving back into composition, or forcing the value into an additional
State<T>
holder.
❤️ 3
s

Sergey Y.

09/06/2020, 7:46 PM
>
animate
 should return a 
State<T>
:thinking_face:
Oh...