【Androidアプリチュートリアル】簡単なアニメーションつけてリッチにしよう

今回は、Androidアプリ開発のチュートリアルとして、簡単なアニメーション付きカウントダウンアプリを作っていきましょう！

「カウントダウンアプリを作ろう」で作成したアプリをベースにチュートリアルを作成していきますので、まだの人はカウントダウンアプリの作成から進めてください。

2024年5月29日【Androidアプリチュートリアル】カウントダウンアプリを作ろう

完成形はこちら

終了テキストとカウントダウンテキストにアニメーションがついています。

バージョン

Android Studio Chipmunk | 2021.2.1 Patch 1

Kotlin 1.6.21

アニメーションの追加
- 終了テキストのアニメーション
- カウントダウンテキストのアニメーション
まとめ

アニメーションの追加

今回のアニメーションは簡単なため ViewCompat というクラスを使用していきます。

メモ

複雑なアニメーションは、Android animatorなどを使うことで実現できます。

ViewCompatクラスの animate() というメソッドが今回重要です。

終了テキストのアニメーション

まずは終了テキストのアニメーションから実装していきます。

MainActivity を開いてください。

CountDownTimer クラスの onFinish() メソッドだけを抜き出しています。

override fun onFinish() {
    button.isEnabled = true

    // ↓↓ここから↓↓
    // alphaを0に設定
    finishedTextView.alpha = 0f
    // アニメーションのスタート
    ViewCompat.animate(finishedTextView)
        .setDuration(500)
        .alpha(1f)
        .start()
    // ↑↑ここまでを追加↑↑

    finishedTextView.visibility = View.VISIBLE
    countTextView.text = "0"
}

1つ1つ解説していきます。

終了テキストのアニメーション

まず終了テキストは段々と表示されるようなアニメーションになっています。

つまり alpha を0から1になるようにすればいいわけですね。

そのために finishedTextView の alpha を0にしています。

アニメーションをさせる対象の指定

次に ViewCompat.animate() です。

引数に finishedTextView を指定していますが、

これはアニメーションをさせる対象を指定させています。

アニメーションの長さ

その次に setDuration() メソッドを呼んでいますが、これはアニメーションの長さです。

今回は500ミリ秒（0.5秒）にしました。

alphaの指定

その下の alpha() メソッドですが、これは今の alpha の状態から指定した alpha まで変更させます。

つまり最初に alpha を0に設定しているので、段々と0から1になるようなアニメーションになります。

開始

最後に start() メソッドです。これは文字通りアニメーションを開始させるメソッドです。

それではここでビルドしてみましょう。

このように「終了」がフワッと表示されればOKです！

カウントダウンテキストのアニメーション

最後にカウントダウンテキストにもアニメーションをつけていきましょう。

今回もソースコードは一部抜粋しており、 CountDownTimer クラスの onTick() メソッドのみです。

まずは以下のように実装してみてください。

override fun onTick(millisUntilFinished: Long) {
    // 1秒ごとにテキストを更新
    val second = ceil(millisUntilFinished / 1000.0).toInt()
    countTextView.text = second.toString()

    // ↓↓ここから↓↓
    // scaleを元に戻す
    countTextView.scaleX = 1f
    countTextView.scaleY = 1f

    // scaleアニメーション開始
    ViewCompat.animate(countTextView)
        .setDuration(1000)
        .scaleX(2f)
        .scaleY(2f)
        .start()
    // ↑↑ここまでを追加↑↑
}

1つ1つ説明していきます。

scaleの設定

カウントダウンテキストは1秒の間に段々と大きくなるようなアニメーションをしています。

これは View の scale を段々と上げることで実現できます。

補足

scale とは View の比率のことです。

1を指定すると1倍になり、2を指定すると2倍になるという具合です。

X と Y というのがありますが、 X が横方向で Y が縦方向です。

この scale を上手く使っていくのですが、最初に countTextView の scaleY と scaleX を0にしていると思います。

onTick は1秒ごとに呼ばれるので、次のアニメーションに備えて初期状態に戻して上げる必要があるというわけです。

アニメーション実装部分

次にアニメーションの実装部分です。

先ほどと同様に View.animate() を使います。

今回は1秒ごとのカウントなので setDuration() メソッドには1000ミリ秒（1秒）を指定しています。

scaleX() と scaleY() ですが、これは元の scale からそれぞれの方向に指定した scale まで変更させます。

先ほど初期値に scale を1に設定しているので、1から2まで大きくさせるような動きになります。

これは先ほどの alpha と全く同じ考え方ですね。

開始

最後に start() メソッドを呼んでアニメーションを開始させています。

ここまで実装できたらビルドさせてみましょう。

このように、カウント表示がアニメーションで表示されればOKです！

最後に MainActivity のソースコードを載せておきますので、必要があれば参考にしてください。

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.CountDownTimer
import android.view.View
import android.widget.Button
import android.widget.TextView
import androidx.core.view.ViewCompat
import kotlin.math.ceil

class MainActivity : AppCompatActivity() {

    companion object {
        private const val COUNT_DOWN_MILLISECOND: Long = 5000
        private const val INTERVAL_MILLISECOND: Long = 1000
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val button = findViewById<Button>(R.id.count_down_button)
        val finishedTextView = findViewById<TextView>(R.id.finished_text)
        val countTextView = findViewById<TextView>(R.id.count_label)

        val timer = object : CountDownTimer(COUNT_DOWN_MILLISECOND, INTERVAL_MILLISECOND) {
            override fun onFinish() {
                button.isEnabled = true

                // ↓↓ここから↓↓
                // alphaを0に設定
                finishedTextView.alpha = 0f
                // アニメーションのスタート
                ViewCompat.animate(finishedTextView)
                    .setDuration(500)
                    .alpha(1f)
                    .start()
                // ↑↑ここまでを追加↑↑

                finishedTextView.visibility = View.VISIBLE
                countTextView.text = "0"
            }

            override fun onTick(millisUntilFinished: Long) {
                // 1秒ごとにテキストを更新
                val second = ceil(millisUntilFinished / 1000.0).toInt()
                countTextView.text = second.toString()

                // ↓↓ここから↓↓
                // scaleを元に戻す
                countTextView.scaleX = 1f
                countTextView.scaleY = 1f

                // scaleアニメーション開始
                ViewCompat.animate(countTextView)
                    .setDuration(1000)
                    .scaleX(2f)
                    .scaleY(2f)
                    .start()
                // ↑↑ここまでを追加↑↑
            }
        }

        button.setOnClickListener {
            // 各Viewの初期設定
            button.isEnabled = false
            finishedTextView.visibility = View.INVISIBLE
            countTextView.text = "5"
            // timerのスタート
            timer.start()
        }
    }
}