[Android] frame-by-frame Animation でパラパラアニメーション

簡単に扱えるanimationの一つ、複数の画像を順番に表示しながら動画のように見せる方法です。
　

Android Studio 3.5.3
API 29

frame-by-frame animation

いわゆるパラパラ漫画で　frame-by-frame animation　と言われるアニメーションです。

パラパラ漫画なので、それなりに少しづつ変化のある画像を揃えます。

1x1.trans - [Android] frame-by-frame Animation でパラパラアニメーション

…

これらの画像を順番に表示
そのために画像の順番、時間間隔を記述したリストを設定します

ImageView imgView ...
// ImageViewの　backgroundにanimation listを設定
imgView.setBackgroundResource(R.drawable.animation_list);
AnimationDrawable animation = (AnimationDrawable)imgView.getBackground();

animation.start();
...
animation.stop();

ImageView imgView ...

// ImageViewの　backgroundにanimation listを設定

imgView.setBackgroundResource(R.drawable.animation_list);

AnimationDrawable animation = (AnimationDrawable)imgView.getBackground();

animation.start();

...

animation.stop();

目次
1. AnimationDrawables
2. サンプル動画

AnimationDrawable

それぞれの画像をdrawable以下におき、animation_list.xmlファイルを作成して以下のように記述します。
　

　
onshot: 繰り返し
duaration：一個の画像の表示時間[msec]
drawable\animation_list.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- oneshot="true":描画１回のみ、oneshot="false"：繰り返し -->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true">
    <!-- duration：表示間隔[msec]-->
    <item android:drawable="@drawable/img01" android:duration="200" />
    <item android:drawable="@drawable/img02" android:duration="200" />
    <item android:drawable="@drawable/img03" android:duration="200" />
    <item android:drawable="@drawable/img04" android:duration="300" />
    <item android:drawable="@drawable/img06" android:duration="300" />
    <item android:drawable="@drawable/img07" android:duration="300" />
    <item android:drawable="@drawable/img08" android:duration="300" />
    <item android:drawable="@drawable/img09" android:duration="200" />
    <item android:drawable="@drawable/img10" android:duration="200" />
    <item android:drawable="@drawable/img01" android:duration="200" />
</animation-list>

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true">

</animation-list>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_vertical"
    android:background="#00a"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:scaleType="fitCenter"
        android:background="#000"
        android:layout_width="600dp"
        android:layout_height="400dp"
        android:contentDescription="@string/description"/>

    <Button
        android:id="@+id/button"
        android:text="@string/button"
        android:layout_margin="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:gravity="center_vertical"

android:background="#00a"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:scaleType="fitCenter"

android:background="#000"

android:layout_width="600dp"

android:layout_height="400dp"

android:contentDescription="@string/description"/>

<Button

android:id="@+id/button"

android:text="@string/button"

android:layout_margin="20dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

　
strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="description">ball</string>
    <string name="button">Animation</string>
</resources>

<string name="app_name">YourAppName</string>

<string name="button">Animation</string>

</resources>

　
MainActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.graphics.drawable.AnimationDrawable;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private AnimationDrawable animation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imgView = findViewById(R.id.image_view);
        imgView.setBackgroundResource(R.drawable.animation_list);

        animation = (AnimationDrawable)imgView.getBackground();

        Button button = findViewById(R.id.button);
        button.setOnClickListener(view -> {
            if(animation.isRunning()){
                // 一度stopしないと再スタートしない
                animation.stop();
            }
            animation.start();
        });
    }
}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.graphics.drawable.AnimationDrawable;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

private AnimationDrawable animation;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ImageView imgView = findViewById(R.id.image_view);

imgView.setBackgroundResource(R.drawable.animation_list);

animation = (AnimationDrawable)imgView.getBackground();

Button button = findViewById(R.id.button);

button.setOnClickListener(view -> {

if(animation.isRunning()){

// 一度stopしないと再スタートしない

animation.stop();

}

animation.start();

});

}

サンプル動画

ImageViewの背景としてanimation_list.xmlを設定して
start()で開始します。これはそのまま継続しているので再開させるときはstop()で停止させる必要があります。
　
　
関連ページ：

android.view.animation
Property Animation 画像が回転して落ちていくアニメーション
AnimatorListenerAdapter によるAnimationの一時停止と再開くアニメーション
frame-by-frame Animation でパラパラアニメーション
TransitionDrawable クロスフェード animation

Ref:
AnimationDrawable