Archie

    Archie

    2 years ago
    is there a way to animate/create transition for
    Composable
    s getting "disposed". When changing state in compose it is usually done this way:
    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

    2 years ago
    you could wrap it inside an animation
    an example of this would be Crossfade
    Crossfade(current = currentTab) {
                    when (it) {
                        Fragments.HOME_FRAG -> HomeScreen()
                        Fragments.ABOUT_US_FRAG -> AboutUsScreen()
                    }
                }
    Archie

    Archie

    2 years ago
    Wow Im really missing out on these documentations! Thank you very much!
    Adam Powell

    Adam Powell

    2 years ago
    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
    Sergey Y.

    Sergey Y.

    2 years ago
    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.
    Adam Powell

    Adam Powell

    2 years ago
    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.
    Sergey Y.

    Sergey Y.

    2 years ago
    animate
     should return a 
    State<T>
    :thinking_face:
    Oh...