Día 20 Redactar UI Animation II (cambiar colores y degradados) | Autor: Teng Wang | Septiembre de 2021

¡En el Triatlón 2021, un paso al día, 30 días para aprender la interfaz de usuario de Android Compose!

La epidemia de este año es bastante grave. Espero que todos la pasen bien. Espero que la epidemia pase rápidamente y podamos volver a la época de algunas reuniones técnicas fuera de línea ~

Objetivo: aprender a realizar el cambio de color y el degradado de la animación en la interfaz de usuario de Compose todos los días.

El código del programa final de ayer se ejecutará así

El código del programa diario es el siguiente:

@Composable
fun ColorChangeDemo() 
val isGreen =r emembermutableStateOf(value = true)
val animatedColor = animateColorAsState(
if (isGreen.value) Color.Green else Color.Red
)
// 宣告 animate color 的程式碼Column( modifier = Modifier.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp))
Button( onClick =
isGreen.value = !isGreen.value,
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Transparent)
)  Text(text = "Animate Color Change") 
Box( modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.background(animatedColor.value))	val color = if (isGreen.value) Color.Green else Color.Red	Box( modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.background(color)
)

El diagrama de visualización es el siguiente:

Después de un buen amigo, Compose nos ayudará a darnos cuenta de la parte de la interfaz de usuario de animación,

Diferentes cambios de color, investigó Wofeng, si la interfaz de usuario quiere ser superpuesta gradualmente, ¿qué debo hacer?

@Composable
fun ColorChange2Demo() 
val horizontalGradientBrush = Brush.horizontalGradient(
colors =listOf(
Color.Blue,
Color.Red,
Color.White
)
)
val horizontalGradientBrush2 = Brush.horizontalGradient(
colors =listOf(
Color.White,
Color.Red,
Color.Blue
)
)    val isGreen =remembermutableStateOf(value = true)
val isHorizontal1 =remembermutableStateOf(value = true)val animatedColor =animateColorAsState(
if (isGreen.value) Color.Green else Color.Red
)Column(
modifier = Modifier.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp)
)
Button(
onClick =
isGreen.value = !isGreen.value
isHorizontal1.value = !isHorizontal1.value
,
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Transparent
)
)
Text(
text = "Animate Color Change",
modifier = Modifier.background(
brush = if(isHorizontal1.value) horizontalGradientBrush
else horizontalGradientBrush2)
)
Box(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.background(animatedColor.value)
)        val color = if (isGreen.value) Color.Green else Color.Red
Box(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.background(color)
)

¡Eso es todo!

La pantalla es la siguiente: