[JetpackCompose] 何かを開始する前にカウントダウンするアニメーション

はじめに

• 今回は簡単なJetpackComposeのサンプルコードになります

どのような内容か

• 5秒前からカウントダウンし、最後にCallbackが呼ばれる
• 数字はアニメーションで表示→消えるを繰り返してカウントダウンを行う

表示例

コード

CountDown.kt

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun CountDown(
    onFinishedCountDownTimer: () -> Unit,
    modifier: Modifier = Modifier,
) {
    var count by remember { mutableStateOf(5) }
    LaunchedEffect(Unit) {
        do {
            delay(1_000)
        } while (count-- > 0)
        onFinishedCountDownTimer()
    }
    AnimatedContent(
        modifier = modifier.fillMaxSize(),
        targetState = count,
        label = "countDown",
    ) {
        Box(
            modifier = modifier.fillMaxSize(),
            contentAlignment = Alignment.Center,
        ) {
            Text(
                text = "$it",
                fontSize = 64.sp,
                color = Color.Black,
            )
        }
    }
}