Java
Android
アニメーション

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

More than 1 year has passed since last update.


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