Day 20 Compose UI Animation II (change color & gradient)

今年的疫情蛮严重的，希望大家都过得安好，希望疫情快点过去，能回到一些线下技术聚会的时光～

今天目标：了解 Compose UI 上的 animation change color 跟 gradient 可以怎麽实作。

昨天最後的程序码执行起来会是这样

Untitled

今天的程序码如下：

@Composable
fun ColorChangeDemo() {
    val isGreen =r emember{mutableStateOf(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)
	        )
	}
}

显示图如下：

设定好animate後，Compose UI就会帮我们实作动画变色的部分，

提到颜色变化，我顺便研究了如 UI 想要渐层的话，应该怎麽做？

@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 =remember{mutableStateOf(value = true)}
val isHorizontal1 =remember{mutableStateOf(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)
        )
}
}

这样就可以罗！

显示如下：

Untitled