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

josefdolezal

09/10/2021, 10:09 PM
Hello all! 👋 Could you point me to the right direction with animating position of composable? I am trying to animate text and it’s position based on
isLoading
variable alongside animating progress indicator’s visibility
c

Colton Idle

09/10/2021, 10:15 PM
I'm assuming you have something like this Column{ Loader() Text() } so you could put animateContentSize() modifier on the Column as a modifier. Then you just need a Crossfade on the text composable?
animate content size:

https://youtu.be/7yY2OocGiQU?t=219

Crossfade:

https://youtu.be/7yY2OocGiQU?t=240

j

josefdolezal

09/10/2021, 10:45 PM
I am not sure if I can use
animateContentSize
in my case, I put together a gist here: https://gist.github.com/josefdolezal/5583dec554e4341cbf39ddc133010545
The loader should be centered in the empty space, which I think I have to do with
.weight
but then I think I am not able to animate content size
d

Doris Liu

09/11/2021, 12:56 AM
Ah, the animatePlacement concept I've been working on could've been useful for this case, since you can think of the Loading/Done text as changing from bottom aligned to center aligned. Wouldn't it be nice if the text that's going through an alignment change can animate to the new position. 😛 While that's not available yet, I'd recommend achieving that with a varying weight spacer. So you could have something like:
Copy code
Box(Modifier.weight(1f)) {
    Loader()
    Column {
       Spacer(Modifier.weight(1f))
       Crossfade(..) { .. }
       val bottomWeight by animateFloatAsState(if(isLoading) 0f else 1f)
       if (bottomWeight > 0f) {
          Spacer(Modifier.weight(bottomWeight))
       }
    }
}
j

josefdolezal

09/11/2021, 9:36 AM
🤯 works just the way I wanted! Thanks 👏! Animating alignment was my first thought, but I couldn’t find a way to actually animate it. Good to know you folks are exploring possibilities to have it supported.
6 Views