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

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

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

【Androidアプリチュートリアル】カウントダウンアプリを作ろう

完成形はこちら

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

goal_image
バージョン
  • AndroidStudio 4.1
  • Kotlin 1.3.6

アニメーションの追加

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

メモ

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

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

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

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

MainActivity を開いてください。

open_main_activity

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つ解説していきます。

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

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

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

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

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

次に ViewCompat.animate() です。

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

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

アニメーションの長さ

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

今回は500ミリ秒(0.5秒)にしました。

alphaの指定

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

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

開始

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

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

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

check_animation_behavior

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

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

今回もソースコードは一部抜粋しており、 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秒の間に段々と大きくなるようなアニメーションをしています。

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

補足

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

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

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

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

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

アニメーション実装部分

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

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

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

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

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

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

開始

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

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

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

goal

最後に 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()
        }
    }
}

まとめ

お疲れ様でした!

アニメーションでリッチになりましたでしょうか?

シンプルなものでも、アニメーションはアプリのUXを高めるために効果的です。

自在に使えるようになっていきましょう。