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

Matti MK

12/27/2021, 9:51 AM
I would like to animate the alpha of an element from 0f to 1f when a given screen becomes visible. In SwiftUI I implemented the visibility change with the
onAppear
modifier, however, looks like there isn’t a similar option with Compose. I looked over the
Animation
docs, but can’t seem to find a non-state based animation, which leads me to believe I need to have state that changes when the screen becomes visible?
r

Rafs

12/27/2021, 9:59 AM
If you want to manually drive the value of a non-state based animation, you can go one step lower and use the
Animatable
API.
m

Matti MK

12/27/2021, 10:02 AM
It looks to me as if the higher level compose animation APIs are suitable, just wondering how to go about triggering a single shot animation when a view becomes visible
a

Albert Chang

12/27/2021, 10:03 AM
Check
AnimatedVisibility
.
m

Matti MK

12/27/2021, 10:14 AM
Thanks, I looked into it but found it also requires state. What I would like is just a one shot animation that would be triggered on
onAppear
, but it looks like something like this does not exist and thus it’s necessary to have a state that gets updated when the view becomes visible. The only thing I could think of for this is mutating the state value in
LaunchedEffect
. So, could the answer be to do this:
Copy code
var visibleStateForAnimation by remember { mutableStateOf(false) }
    LaunchedEffect(null) {
        visibleStateForAnimation = true
    }
I’m not too familiar with
LaunchedEffect
so not quite sure about passing
null
as the key 🤔
It does work, but feels a bit hacky 🤷
Finally stumbled on the correct spot in the docs to verify the above: https://developer.android.com/jetpack/compose/side-effects#rememberupdatedstate Thanks for the help, looks as if this is the way to go 👍
d

Doris Liu

01/04/2022, 6:57 PM
AnimatedVisibility
combined with
MutableTransitionState
would allow you to start an animation going from not visible to visible:
Copy code
AnimatedVisibility(
                visibleState = remember {
                    // This sets up the initial state of the AnimatedVisibility to false to
                    // guarantee an initial enter transition. In contrast, initializing this as
                    // `MutableTransitionState(visible)` would result in no initial enter
                    // transition.
                    MutableTransitionState(initialState = false)
                }.apply {
                    // This changes the target state of the visible state. If it's different than
                    // the initial state, an enter/exit transition will be triggered.
                    targetState = true
                },
            ) { // Content that needs to appear/disappear goes here:
                ...
            }
2 Views