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

Zoltan Demant

11/25/2021, 4:56 AM
Im having some animation issues, my intention is to slide in a piece of content over the current; but if the piece is running animations itself, the sliding animation breaks. 🧵👀
c

Chris Sinco [G]

11/25/2021, 4:56 AM
Hmm what APIs are you using? Have you tried AnimatedContent?
z

Zoltan Demant

11/25/2021, 4:57 AM
I think it happens due to the piece switching its contents, crossfading between a loading indicator and its actual contents the first time around. The sliding animation runs perfectly when the piece no longer starts off with its loading indicator. I thought the contentKey would solve this, but it seems that it doesnt. Any clues on how I can make it work? Related discussion. This is what the piece animation looks like:
Copy code
val transition = updateTransition(
            targetState = content,
            label = null
        )

        transition.Crossfade(
            contentKey = { content ->
                content != null 
            },
            animationSpec = spring(
                stiffness = Spring.StiffnessMediumLow,
                visibilityThreshold = 0.01f
            ),
            content = { content ->
                when {
                    content != null -> {
                        Render(content)
                    }
                    else -> {
                        Loading()
                    }
                }
            }
        )
I think I figured it out! Ironic how Ive been looking into this forever, and only managed to find the solution after posting about it 🤷🏽‍♂️ Since Im rendering a backstack, I only want to animate changes to its size. For cases where the difference is 0, I specify a `ContentTransform(None)`; but that seems to also snap the current animation to its end values, which is the case when the loading-to-content transition is running during this animation. Specifying the same animation for cases where the difference >= 0 (instead of >0) seems to solve this!
2 Views