【Android Kotlin】フレームアニメーションを使ってパラパラマンガ風なアニメーションを実装する

# はじめに
工事中

# 実際に使ってみる

ソースコードは[こちら](https://github.com/Kaito-Dogi/android-sample-animation-resources)．
![frame_animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/933349/dbe49ee6-6ccd-bbd9-f45e-f3e6f5698f40.gif)

## animation-listの作成

`res/drawble`に，以下のようなanimation-listファイルを作成する．

```dice_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/number1" android:duration="@integer/number_duration"/>
    <item android:drawable="@drawable/number2" android:duration="@integer/number_duration"/>
    <item android:drawable="@drawable/number3" android:duration="@integer/number_duration"/>
    <item android:drawable="@drawable/number4" android:duration="@integer/number_duration"/>
    <item android:drawable="@drawable/number5" android:duration="@integer/number_duration"/>
    <item android:drawable="@drawable/number6" android:duration="@integer/number_duration"/>
</animation-list>
```

- `android:oneshot`：一回しか再生しないかどうか
- `android:duration`：再生時間

以下のように，再生時間をintegerリソースで作成すると編集しやすい．

```values/integer.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <integer name="number_duration">100</integer>
</resources>
```

## アニメーションを再生

以下のようなレイアウトを作成した．

```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/dice_image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
```

`dice_image_view`の`background`にdice_animationを設定し，これを再生する．

```MainActivity.kt
class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater).apply { setContentView(this.root) }

        // dice_image_viewの背景にdice_animationを設定
        binding.diceImageView.setBackgroundResource(R.drawable.dice_animation)

        // dice_image_viewの背景に設定したdice_animationを取得
        val diceAnimation = binding.diceImageView.background

        // dice_image_viewをクリックした時の処理
        binding.diceImageView.setOnClickListener {
            // diceAnimationがAnimatableの場合
            if (diceAnimation is Animatable) {
                if (diceAnimation.isRunning) {
                    // diceAnimationが再生している場合，停止する．
                    diceAnimation.stop()
                } else {
                    // diceAnimationが停止している場合，再生する．
                    diceAnimation.start()
                }
            }
        }
    }
}
```