Androidでのアニメーション 基本① 画像を使ってパラパラ漫画風に

AnimationDrawableを活用

音量のON / OFFを切り替えるボタンを想定。
ONのときには、アニメーションで音が出ていることをアピール。

完成形

drawableの設定

res/drawable/animation_sound.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false"
    android:visible="true">

    <item
        android:drawable="@drawable/sound_on_max"
        android:duration="750" />
    <item
        android:drawable="@drawable/sound_on_min"
        android:duration="500" />
    <item
        android:drawable="@drawable/sound_on_mid"
        android:duration="500" />

</animation-list>

パラメータ

パラメータ	概要
android:oneshot	trueだと繰り返し無し。falseだとリピート
android:visible	初期状態での可視状態
android:duration	表示時間(ms)

参考画像

ファイル名	画像
sound_on_max
sound_on_mid
sound_on_min
sound_off

Activityの設定

public class MainActivity extends AppCompatActivity {

    private ImageView img;

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

        img = (ImageView) findViewById(R.id.imageView);
        img.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (img.getBackground() instanceof AnimationDrawable) {
                    img.setBackground(ContextCompat.getDrawable(MainActivity.this, R.drawable.sound_off));
                } else {
                    img.setBackground(ContextCompat.getDrawable(MainActivity.this, R.drawable.animation_sound));
                    // AnimationDrawableを取得
                    AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();
                    // アニメーションの開始
                    frameAnimation.start();
                }
            }
        });
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (img == null) {
            return;
        }
        if (img.getBackground() instanceof AnimationDrawable) {
            // AnimationDrawableを取得
            AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();

            // アニメーションの開始
            frameAnimation.start();
        }
    }
}

参考までに！
github -> https://github.com/tttakaoka/AnimationDrawableForSound

参考ページ

http://techbooster.jpn.org/andriod/ui/2192/
https://design.google.com/icons/#ic_volume_up