updateTransition
updateTransition 會根據狀態改變，不同的狀態不同變化，可以有多個動畫「同時」組合一起，開始時間與結束時間都一樣。
與graphicsLayer和animateFloatAsState十分相像。
但animateAsState是各個「獨立」動畫，組合在一起，每一個執行時間可以不一樣。
語法:
// 狀態
var isExpanded by remember { mutableStateOf(false) }
val transition = updateTransition(
targetState = isExpanded, // ← 當狀態改變時，動畫開始
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@Composable
fun UpdateTransitionExample1() {
// 狀態
var isVisible by remember { mutableStateOf(false) }
val updateTransit = updateTransition(
// 當觀察的狀態
targetState = isVisible
)
val height by updateTransit
.animateDp(label = "height animate") { state ->
// 當狀態改變 就會執行這裡
if (state) 200.dp else 100.dp
}
val color by updateTransit
.animateColor(label = "color animate") { state ->
// 當狀態改變 就會執行這裡
if (state) Color.Green else Color.Red
}
val alpha by updateTransit
.animateFloat(label = "alpha animate") { state ->
// 當狀態改變 就會執行這裡
if (state) 1f else 0f
}
Box(
modifier = Modifier
.height(height)
.fillMaxWidth()
.background(color)
.clickable(onClick = {
isVisible = !isVisible
})
) {
Text("Hello", modifier = Modifier.alpha(alpha))
}
}
初始狀態：isExpanded = false
點擊按鈕：isExpanded = true
執行順序：
- updateTransition 檢測到 targetState 從 false → true
- 同時啟動三個動畫：
- cardHeight: 100dp → 200dp
- cardColor: Red → Green
- textAlpha: 0f → 1f
- 所有動畫同步進行，同時開始同時結束