Android jetpack 撰写倒计时动画

Question

是否可以使用 Jetpack Compose 制作类似 gif 的动画？

Answer 1

绝对！您将需要

LaunchedEffect

和

mutableStateOf

可组合项来管理计时器的状态和更新。

@Composable
fun Countdown() {
    val totalTime = 10 // Total time in seconds
    var timeLeft by remember() {
        mutableStateOf(totalTime)
    }
    val anim = remember { Animatable(0f) }

    LaunchedEffect(Unit) {
        while (timeLeft > 0) {
            delay(1000)
            timeLeft--
            anim.snapTo(0f)
            anim.animateTo(1f)
        }
    }

    Column (
        horizontalAlignment=Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center

    ){
        Text(
            modifier = Modifier
                .alpha(anim.value)
                .scale(anim.value/2f+.5f)
            ,
            text = "${timeLeft}",
            fontSize = 64.sp,
            color = Color.DarkGray
        )

        Button(onClick = { timeLeft = totalTime }) {
            Text(text = "Reset")
        }
    }
}