顯示與隱藏動畫
animateContentSize()
animateContentSize會根據大小不同產生動畫。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Composable
fun AnimateContentSizeExample() {
var isExpanded by remember { mutableStateOf(false) }
Box(
modifier = Modifier
.fillMaxWidth()
.animateContentSize()
.background(Color.Blue)
.padding(16.dp)
.clickable {
isExpanded = !isExpanded
}
) {
Column {
Text("click")
if(isExpanded) {
Text("hello \n" +
"world \n" +
"hi \n",
modifier = Modifier.background(Color.White))
}
}
}
}
animateContentSize()要放置在size大小相關的函式之前。
1
2
3
4
5
6
7
8
9
10
11
var expanded by remember { mutableStateOf(false) }
Box(
modifier = Modifier
.background(colorBlue)
.animateContentSize()
.height(if (expanded) 400.dp else 200.dp)
.fillMaxWidth()
.clickable() {
expanded = !expanded
}
)
AnimatedVisibility 顯示與消失動畫
官方文件有許多進入動畫與離開動畫的展示效果。
語法
1
2
3
4
5
6
7
8
9
10
11
12
13
// 顯示或隱藏
var isVisible by remember { mutableStateOf(false) }
AnimatedVisibility(
// 顯示或隱藏
visible = isVisible,
// 進入動畫
enter = fadeIn(),
// 離開動畫
exit = fadeOut()
) {
// 要顯示與隱藏的東西
// 要顯示與隱藏的東西
}
完整程式碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Composable
fun AnimatedVisibilityExample() {
var isVisible by remember { mutableStateOf(false) }
Column {
Button(onClick = {
isVisible = !isVisible
}) {
Text("Click")
}
AnimatedVisibility(
visible = isVisible,
enter = fadeIn(),
exit = fadeOut()
) {
Box(
modifier = Modifier
.size(100.dp)
.background(Color.Blue)
) {
Text("Content")
}
}
}
}