Thread
#compose
    Archie

    Archie

    2 years ago
    Hi, I was wondering if anyone understands how
    Crossfade
    composable work? How does it it able to fade in and fade out the Composables? Why are there two
    Stack
    inside
    Crossfade
    ? What exactly does
    invalidate
    do? and so on and so forth.. I would like to create a custom transition of my own but i struggle to understand how it works. Any guide on where I should start so I could understand these concepts better?
    Zach Klippenstein (he/him) [MOD]

    Zach Klippenstein (he/him) [MOD]

    2 years ago
    invalidate
    is just a function that manually triggers recomposition. Normally, recomposition is triggered automatically when you change the value in a
    State
    object. However, if you’ve factored your state out into non-Composable code and need to trigger recomposition from outside a Composable function, you can use
    invalidate
    .
    The first stack,
    Stack(Modifier.drawOpacity(opacity.value)) {
        children()
    }
    Is just there to apply the opacity to the
    children()
    composable. It could theoretically be any layout composable. Normally
    children()
    will include its own top-level layout, which the caller can choose to be appropriate for itself, but compose doesn’t require a composable to specify a layout. In the case where
    children()
    doesn’t define its own layout, this will be used instead.
    Stack
    or
    Column
    are probably the most reasonable defaults.
    The second stack is what is used to actually draw the two crossfading composables on top of each other.
    Then the basic way it works is: 1. Create a list of all the children/composables that are currently visible. Usually this list will only contain a single item, but it will contain more than one during an actual transition. 2. For each child, figure out how to change its appearance. Crossfade does this by simply drawing it with a varying opacity, but you could apply virtually any transformation here by using different modifiers. Associate the child with a composable function that wraps the original child with the modifier applied (this is the first stack). 3. On every composition, loop through all the visible children and call their wrapped composable functions. When a new child (key) is detected, it gets added to the list in 1. When a transition is finished, it gets removed from the list. 3 uses the
    key
    function to ensure that, even if the order of the children in the list changes, the child's state is preserved. This is required because composable "identity" is based on the order of execution - so it the list changes, and the last item is now the first, it would be invoked in a different position than before which means that, by default, compose would treat it as a completely new composable (losing any internal state that it had been keeping). Using the
    key
    function, tells compose that the child just moved instead.
    Archie

    Archie

    2 years ago
    Thank you very much