Jetpack Compose - Play complex animation on state change

Question

. 。 Answers to this question are eligible for a +200 reputation bounty. Fried Rice wants to to this question. 对这个问题的。

How do I play a complex animation using coroutine on switching to a particular state?

@Composable
fun SomeView(viewModel: SomeViewModel) {
    val state by viewModel.stateFlow.collectAsState()
    val scope = rememberCoroutineScope()
    
    ...
    val shutterAlpha by remember { mutableStateOf(0f) }
    Box(modifier = Modifier
        .fillMaxSize()
        .alpha(shutterAlpha)
        .background(Color.Black)
    )

    val transition = updateTransition(targetState = state, label = "label")
    <on transitioning to CaptureState> { // need actual condition check code here
        scope.launch {
            animate(0f, 1f, animationSpec = tween(150)) { value, _ -> shutterAlpha = value }
            animate(1f, 0f, animationSpec = tween(150)) { value, _ -> shutterAlpha = value }
        }
    }
}

Answer 1

LaunchedEffect is the answer:

@Composable
fun SomeView(viewModel: SomeViewModel) {
    val state by viewModel.stateFlow.collectAsState()
    val scope = rememberCoroutineScope()
    
    ...
    val shutterAlpha by remember { mutableStateOf(0f) }
    Box(modifier = Modifier
        .fillMaxSize()
        .alpha(shutterAlpha)
        .background(Color.Black)
    )

    val transition = updateTransition(targetState = state, label = "label")
    LaunchedEffect(state) {
        if (state == DesiredState) {
            scope.launch {
                animate(0f, 1f, animationSpec = tween(150)) { value, _ -> shutterAlpha = value }
                animate(1f, 0f, animationSpec = tween(150)) { value, _ -> shutterAlpha = value }
            }
        }
    }
}