Android 两首合成曲的喷气背包动画

你能更详细地解释一下这项任务吗？最好是一步一步地为所需的动画算法. 我会编辑此消息，如果我可以帮助，或更多的细节，从你会帮助其他受访者.

更新

是像这样吗？

AnimatedScreenAndLogo个

更新 2

按比例设置内容动画的功能:

@Composable
private fun ScaleAnimatedVisibility(
    visible: Boolean,
    scalePosition: (scale: Float) -> Unit,
    animationDurationMillis: Int,
    delayScaleInAnimation: Int = 0,
    delayScaleOutAnimation: Int = 0,
    content: @Composable () -> Unit
) {
    val scale by animateFloatAsState(
        targetValue = if (visible) 1f else 0f,
        animationSpec = tween(
            delayMillis = if (visible) delayScaleInAnimation else delayScaleOutAnimation,
            durationMillis = animationDurationMillis
        ),
        label = ""
    )

    Box(
        modifier = Modifier.scale(scale = scale)
    ) {
        scalePosition(scale)
        content()
    }
}

使用示例:

@Composable
fun AnimatedScreenAndLogo() {
    var animationIsPlaying by remember { mutableStateOf(false) }

    var animateLogo by remember { mutableStateOf(false) }
    var animateLoginScreen by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.White),
        contentAlignment = Alignment.Center
    ) {
        ScaleAnimatedVisibility(
            visible = animateLogo,
            scalePosition = { scale ->
                if (animateLogo && animationIsPlaying && scale == 1f) {
                    animateLogo = false
                } else {
                    if (!animateLogo && animationIsPlaying && scale == 0f) {
                        animateLoginScreen = true
                    }
                }
            },
            delayScaleOutAnimation = 1000,
            animationDurationMillis = 1000
        ) {
            Logo()
        }

        ScaleAnimatedVisibility(
            visible = animateLoginScreen,
            scalePosition = {},
            animationDurationMillis = 1000,
            delayScaleInAnimation = 1000,
        ) {
            LoginScreen()
        }
    }

    LaunchedEffect(key1 = Unit, block = {
        animationIsPlaying = true
        animateLogo = true
    })
}