Generalidades

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

Rey Teng

¡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í

1*4BS8WcJHAf6lotXFrYYF5A

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:

Eso es todo para la parte de cambio de color de la pantalla ~ En realidad, hay bastantes configuraciones, ¡pero puedes estudiarlas!

¡Nos vemos mañana!

Materiales de referencia:

Este artículo se publica simultáneamente en el enlace del artículo de iT Bangbang

LEER  Programa de software rápido y económico.Introducción al Shareware | Autor: Irfan Maulana | Julio de 2021

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba