JetpackCompose無限に点滅するアニメーションの実装方法

今回は繰り返すアニメーションについて調べてみました。

点滅のアニメーションをさせたいわけではなく、どちらかと言うと繰り返す方法を探していました。

サンプルコードです

.kt

val infiniteTransition = rememberInfiniteTransition()
val alpha by infiniteTransition.animateFloat(
    initialValue = 0f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        animation = keyframes {
            durationMillis = 500
        },
        repeatMode = RepeatMode.Reverse
    )
)
Surface(
    shape = MaterialTheme.shapes.small
) {
    Spacer(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .background(Color(0xFF666666).copy(alpha = alpha))
    )
}

repeatMode = RepeatMode.Reverseこちらが繰り返す処理の設定です。

アニメーションの方はinitialValue = 0fで透明からtargetValue = 1f表示へと変化します。
durationMillis = 500でアニメーションする時間を設定してます。

作成したアニメーションはbackgroundのalphaに設定します。

以上です。