34. Compose 投票动画

准备数据

1. 投票的数据模型

data class VoteEntity(
    val percent: Float,
    val color: Color,
    val voteText: String,
)

2. 数据的处理

object Constant {

    /**
     * 获取4个随机数
     */
    fun getRandomNum(): MutableList<Float> {
        val list = mutableListOf<Int>()
        repeat(4) {
            val randoms = (0..10000).random()
            list.add(randoms)
            XLogger.d("随机数------->$randoms")
        }

        val sum = list.sum()

        val valueList = mutableListOf<Float>()
        list.forEach {
            val percent = it / sum.toFloat()
            val format = DecimalFormat("0.##")
            format.roundingMode = RoundingMode.HALF_UP
            val value = format.format(percent)
            valueList.add(value.toFloat())
        }
        return valueList
    }

    /**
     * 投票的数据bean
     */
    fun getVoteList(): MutableList<VoteEntity> {
        val randomList = getRandomNum()
        val colors = listOf(Color(0xFFDD493E), Color(0xFFCE4372), Color(0xFF4F62CF), Color(0xFF2196F3))
        val voteTexts = listOf("中山大学", "厦门大学", "武汉大学", "四川大学")
        val dataList = mutableListOf<VoteEntity>()
        randomList.forEachIndexed { index, fl ->
            dataList.add(VoteEntity(percent = fl,  color = colors[index], voteText = voteTexts[index]))
        }
        return dataList
    }
}

渐变色

val gradient1 =listOf(Color(0xFF6253e1), Color(0xFF852D91),Color(0xFFA3A1FF),Color(0xFFF24645))

UI层

@OptIn(ExperimentalTextApi::class)
@Composable
fun VoteContent() {
    val dataList = Constant.getVoteList()

    var showPercent by remember {
        mutableStateOf(false)
    }


    Column(modifier = Modifier.fillMaxSize()) {
        Text(modifier = Modifier.padding(horizontal = 20.dp, vertical = 10.dp),
            text = "中国颜值最高大学排名：TOP10名校扎堆，谁才是你心中的No.1 ?",
            fontSize = 16.sp,
            fontWeight = FontWeight.SemiBold,
            color = Color.Blue,
            style = TextStyle(
                brush = Brush.linearGradient(
                    colors = gradient1
                )
            )
            )

        dataList.forEachIndexed { index, _ ->
            VoteItem(dataList[index], showPercent) {
                showPercent = true
            }
        }
    }
}


/**
 * 投票的每个条目的内容
 */
@Composable
fun VoteItem(voteEntity: VoteEntity, showPercent: Boolean, onClick: () -> Unit) {
    val shape = RoundedCornerShape(4.dp)
    val modifierOuter = Modifier
        .padding(horizontal = 20.dp, vertical = 4.dp)
        .fillMaxWidth()
        .clickable { onClick.invoke() }
        .height(30.dp)
        .background(color = Color(0xFFC5C1C1), shape = shape)

    Box(modifier = modifierOuter, contentAlignment = Alignment.CenterStart) {
        Box(modifier = Modifier
//                .animateContentSize(animationSpec = tween(durationMillis = 1000, easing = LinearOutSlowInEasing))
            .animateContentSize(animationSpec = spring(dampingRatio = Spring.DampingRatioNoBouncy, stiffness = Spring.StiffnessVeryLow))
            .fillMaxWidth(if (showPercent) voteEntity.percent else 0.0f)
            .fillMaxHeight()
            .background(color = voteEntity.color, shape = shape), contentAlignment = Alignment.CenterEnd) {
        }

        Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween) {
            VoteText(voteEntity.voteText)
            if (showPercent) {
                VotePercent(text = "${voteEntity.percent}")
            }
        }
    }
}

/**
 * 投票的选项内容
 */
@Composable
fun VoteText(text: String) {
    Text(modifier = Modifier.padding(start = 4.dp),
        text = text,
        color = Color.Black,
        fontSize = 14.sp)
}

/**
 * 投票的百分比
 */
@Composable
fun VotePercent(text: String) {
    Text(modifier = Modifier.padding(end = 4.dp),
        text = "$text%",
        color = Color.White,
        fontSize = 14.sp)
}

github代码地址