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

Teng Wang

6 min readSep 25, 2021

2021 鐵人賽一天一腳步，30天學會 Android Compose UI！

今年的疫情蠻嚴重的，希望大家都過得安好，希望疫情快點過去，能回到一些線下技術聚會的時光～

今天目標：了解 Compose UI 上的 animation change color 跟 gradient 可以怎麼實作。

昨天最後的程式碼執行起來會是這樣

今天的程式碼如下：

@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)
        )
}
}

這樣就可以囉！

顯示如下：

顯示顏色變化的部分就這樣～其實還有蠻多設定，不過就留給你們研究囉！

明天見！

參考資料：

本文同步發表在 iT邦幫忙上文章連結

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

Written by Teng Wang