j

    josefdolezal

    1 year ago
    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
    Colton Idle

    Colton Idle

    1 year ago
    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

    1 year ago
    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
    Doris Liu

    Doris Liu

    1 year ago
    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:
    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

    1 year ago
    🤯 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.