jetpack compose 中的动画 UI

Question

我需要一些帮助，根据一些实时数据为我的 android TV 项目的整个 UI 制作动画。

以下我所追求的结构：

@Composable
fun MainPageUI(){
    var isClicked by remember { mutableStateOf(false) }
    Scaffold(topBar = {}) { paddingValues ->
        Column(modifier = Modifier.padding(paddingValues)){
            Box(Modifier.weight(0.50f)){
               //Code for some banner
            }
            Column(modifier = Modifier.weight(0.50f)){
                Row {
                    //Code for menu bar
                }
                Box {
                    //Code for main content
                }
            }
        }
    }
}

我想做的是，当通过 isClicked 接收到一些实时数据时，我想将整个 UI 向上滑动，以便横幅部分仅部分可见，比如屏幕的 10%，其余部分被其余部分占据内容（菜单和内容部分）。

我试过：

val offsetAnimation: Dp by animateDpAsState(if (isRecClicked) (-200).dp else 0.dp)

然后在横幅部分和其他部分的修饰符中将其设置为

absoluteoffset

，但这只会在屏幕底部留下一个深色矩形，200 dp 高。我想要的是用我的应用程序的内容部分填充此部分，以显示更多内容。

有没有办法做到这一点？

Answer 1

我建议为此使用

AnimatedContent

。它使您能够指定几乎任何类型的滑动动画并将可组合函数包装到其中。例如：

setContent {
        var isClicked by remember { mutableStateOf(false) }
        AnimatedContent(
            targetState = isClicked,
            transitionSpec = {
                val durationMillis = 1000
                if (targetState != initialState && targetState) {
                    (slideInVertically(animationSpec = tween(durationMillis)) { height -> height })
                        .with(slideOutVertically(animationSpec = tween(durationMillis)) { height -> -height })
                } else {
                    slideInVertically(animationSpec = tween(durationMillis)) { height -> -height } with
                            slideOutVertically(animationSpec = tween(durationMillis)) { height -> height }
                }.using(
                    SizeTransform(clip = false)
                )
            }
        ) { buttonClicked ->
            if (buttonClicked) {
                Column(
                    Modifier
                        .fillMaxSize()
                ) {
                    Text(
                        "Some content",
                        modifier = Modifier
                            .fillMaxSize()
                            .background(Color.White)
                            .padding(top = 100.dp),
                        fontSize = 26.sp
                    )
                }
            } else {
                Row(Modifier.fillMaxSize()) {
                    Column(
                        Modifier
                            .fillMaxWidth()
                            .align(Alignment.CenterVertically)
                    ) {
                        Button(
                            onClick = { isClicked = true },
                            modifier = Modifier
                                .align(Alignment.CenterHorizontally)
                        ) {
                            Text("Click me!")
                        }
                    }
                }
            }
        }
    }

实现此目的的另一种方法是使用

AnimatedVisibility

。有关详细信息，请参阅文档： https://developer.android.com/jetpack/compose/animation/composables-modifiers#animatedcontent https://developer.android.com/jetpack/compose/animation/composables-modifiers#animatedvisibility