Jetpack Compose学习 Crossfade

Jetpack Compose学习 -------- Crossfade

Crossfade 动画 淡入淡出

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
37
38
39
40
41
42
43

enum class MyColors(val color: Color) {
Red(Color.Red),
Green(Color.Green),
Blue(Color.Blue),
}

//淡入淡出 动画
@Composable
fun CrossfadeDemo() {
var currentColor = remember {
mutableStateOf(MyColors.Red)
}
Column {
Row {
MyColors.values().forEach { myColors ->
Button(
onClick = { currentColor.value = myColors },
Modifier.weight(1f, true)
.height(48.dp)
.background(myColors.color),
colors = ButtonDefaults.buttonColors(
backgroundColor = myColors.color
)
) {
Text(myColors.name, color = Color.White)
}
}
}
//淡入淡出 切换动画
Crossfade(
targetState = currentColor,
animationSpec = tween(3000)
) { selectedColor ->
Box(
modifier = Modifier
.fillMaxSize()
.background(color = selectedColor.value.color)
)
}
}
}