Jetpack Compose 进度条加速效果

需求:

需要一个进度条的组件,需要执行一个耗时逻辑(但具体实际耗时不确定),耗时逻辑在N秒内,如果提前执行完毕,则进度条加速;如果N秒还没执行完毕,也加速。

实际上,在Compose组件中,得让进度条实现2段动画继续效果

通用的一个进度条的组件,就是大概是在n秒中做个操作,如果满足或超时就加速,之后完成最终操作

效果

代码

@Composable
fun SplashProgress(modifier: Modifier = Modifier) {


    var openAnim by remember { mutableStateOf(false) }
    var openAccAnim by remember { mutableStateOf(false) }

	//超时时间
    val time = 10 * 1000L

    val context = LocalContext.current as SplashActivity

    val progres by animateFloatAsState(targetValue = if (openAnim) 0.9f else 0f, animationSpec = tween(time.toInt()), finishedListener = {

    })

    var isAcc by remember { mutableStateOf(false) }

    LaunchedEffect(key1 = Unit) {
        openAnim = true
        

        withTimeoutOrNull(time) {
            //这里做模拟耗时操作
            delay(2500)
			
        }

        //启动加速动画
        isAcc = true
    }

    var data = { 0f }
    if (isAcc) {
        val accProgres by animateFloatAsState(targetValue = if (openAccAnim) 1f else progres, animationSpec = tween(1000), finishedListener = {
            //最终加速动画执行完毕后的操作
        })
        data = { accProgres }
		//这里注意先创建好accProgres对象,再进行启动动画
        openAccAnim = true
    } else {
        data = { progres }
    }
    LinearProgressIndicator(
        progress = data, modifier = Modifier
            .padding(horizontal = 50.dp)
            .fillMaxWidth()
            .height(6.dp), trackColor = "#cecdcf".color(), color = APP_Primary_color, strokeCap = StrokeCap.Round
    )

}