やりたいこと/できること

Webサイトなどでよく見かける「加速したあと減速するカウント(下記動画を見ていただいたほうが分かりやすいと思います)」をAndroidでも実装する方法について説明します。
サンプルとして、ボタンを押すと各Interpolator(下記解説)に応じたカウントアップアニメーションを開始する内容を実装します。

環境

material3 : 1.0.0-beta03
Kotlin : 1.7.0
JetpackCompose : 1.2.0

ソースコードと説明

ValueAnimationを使う

Androidには様々なアニメーションの種類がありますが、値の増減をアニメーションさせるためにはValueAnimationを使います。ValueAnimationではint、float、または color の値のセットを指定することで、アニメーションの継続時間中に値の増減にアニメーションをセットすることができます。

@Composable
fun CountUpScreen() {
    val initValue = 0
    val targetValue = 100
    val setDuration = 10000L // アニメーションの時間を10秒に設定
    val count = remember{ mutableStateOf(0) }

    val animator = ValueAnimator.ofInt(initValue, targetValue).apply{
        duration= setDuration
        interpolator= AccelerateDecelerateInterpolator()
        addUpdateListener{
            count.value =it.animatedValue as Int // アニメーションで更新された値をcountへ格納
        }
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ){
        Text(
            text = "${count.value}",
            fontSize = 96.sp,
            fontWeight = FontWeight.Bold
        )
        Button(
            onClick ={animator.start()} // ボタンを押したらアニメーションスタート
        ){
            Text(text = "CountUp")
        }
    }

}

今回のサンプルでは以下のメソッドを使用しました。

ofInt()：アニメーションで開始する値と終了値を設定
dulation：初期値から終了値へ変化するまでにかかる時間
interpolator：値の変化に対するアニメーションのタイプ(詳しくは以下の項目で解説)
start()：アニメーションの実行
onAnimationUpdate()：アニメーションで更新した値を取得し、countへ格納
詳細な内容についてここでは割愛していますので、こちらのリファレンスをご参考ください。

Interpolatorでアニメーションの変化を制御する

アニメーションの変化を制御するにはInterpolatorを指定します。

デフォルトではAccelerateDecelerateInterpolator()が設定されており、以下の表に示したInterpolatorを設定することで、アニメーションに様々な変化をつけることができます。

動作	クラス/インターフェース	説明
	AccelerateDecelerateInterpolator	開始から加速していき途中で減速
	AccelerateInterpolator	ゆっくりと開始し、その後に加速
	AnticipateInterpolator	変化が逆方向に開始してから、順方向に切り替わる
	AnticipateOvershootInterpolator	変化が逆方向に開始し、順方向に切り替わり、目標値を過ぎてから終了値に戻る
	BounceInterpolator	終了値に向かってバウンドする（ボールが跳ね返るイメージ）
	CycleInterpolator	指定したサイクル数だけ逆方向と順方向に切り替わる
	DecelerateInterpolator	変化が急速に開始し減速
	LinearInterpolator	変化の速度が一定
	OvershootInterpolator	変化が順方向に開始し、最終値を過ぎてから戻る

カウントアップ/ダウンでよく使うのは

AccelerateDecelerateInterpolator()
AccelerateInterpolator()
DecelerateInterpolator()
LinearInterpolator()

あたりでしょうか🤔

まとめ

値の変化にアニメーションをつけるにはValueAnimationを使う
Interpolatorを指定することで様々なアニメーションへカスタマイズが可能

今までAndroidのアニメーションはMotionLayoutしか使ったことがなく、今回このサンプルを作るにあたって初めてアニメーションについて調べるキッカケになりました。今回はValueAnimationという昔からある技術を使いましたが、今後はJetpackComposeで提供されているアニメーションAPIを使って様々なアニメーションにチャレンジしてみたいと思います。

おまけ

文字のアルファ値もアニメーションして終了値に向かうに連れ濃くなるようにしてみました。（診断アプリとかに使えそう？）

やりたいこと/できること

環境

ソースコードと説明

ValueAnimationを使う

Interpolatorでアニメーションの変化を制御する

まとめ

参考

関連ドキュメント