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

はじめに

工事中

実際に使ってみる

ソースコードはこちら．

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()
                }
            }
        }
    }
}