15
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

#AnimationDrawableを活用

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

##完成形
animation_sample.gif

##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_max.png
sound_on_mid sound_on_mid.png
sound_on_min sound_on_min.png
sound_off sound_off.png

##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

15
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?