[Androidアニメーション] 5. Drawable Animation

AndroidのAPIににおける2Dアニメーションの種類は主に3種類あります。

Property Animation

Android3.0(API level 11)からサポートされ、どんなオブジェクトにもアニメーションを行うことができる

View Animation
Viewsに回転、移動、拡大縮小、透明度変換などのアニメーションが行える

Drawable Animation
パラパラ漫画のようにフレームを連続再生することができる

ここでは、Developer AndroidのDrawable Animationの中身をかいつまんで、Drawable Animationについて紹介します。

Drawable Animationとは

Drawable Animationは、Drawable リソースを使って、連続的に表示をすることによってアニメーションを作ることが出来ます。フィルムのような役割をし、順番に沿って、連続した異なった画像を表示して行く従来のアニメーションです。AnimationDrawableクラスは 
Drawable Animationのためのクラスになります。

プログラムの中で、アニメーションのフレームを定義し、AnimationDrawableクラスのAPIを使って、アニメーションを構成するフレームをリスト化したXMLファイルによって簡単に行うことが出来ます。このXMLファイルはAndroidプロジェクトのres/drawable/に置きます。この場合、アニメーションの各フレームに順番と継続時間を指定します。

XMLファイルには、ルートノードとして、<animation-list>要素と連続したフレーム<item>ノードを指定します。XMLファイルの例は以下の通りです。

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

このアニメーションは、3フレームのみです。listのandroid:oneshotの属性をtrueにセットすることによって、1回で停止し、最後にラストのフレームを表示します。falseをセットするとアニメーションは繰り返します。プロジェクトのres/drawable/ディレクトリに保存されたrocket_thrust.xmlを、Viewに背景画像として指定することが出来ます。ここでのActivityの例は、ImageViewにアニメーションを加え、スクリーンにタッチした時に、アニメーションが始まるプログラムです。

AnimationDrawable rocketAnimation;
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
}
public boolean onTouchEvent(MotionEvent event) {
  if (event.getAction() == MotionEvent.ACTION_DOWN) {
    rocketAnimation.start();
    return true;
  }
  return super.onTouchEvent(event);
}

AnimationDrawableで呼ばれるstart()は、onCreate()の中では呼ぶことができません。AnimationDrawableがウィンドウ上にまだ配置されていないからです。もし、アニメーションをすぐに始めたい場合、interactionを要求することなしに、Windowにフォーカスされた時に呼ばれるonWindowFocusChanged()から呼ぶことが出来ます。

XMLを使用しないサンプルプログラム

XMLファイルを使用しないサンプルプログラムは以下の通りです。Activityの中のみでアニメーションを指定することが出来ます。ここでは3フレームを使った250msごとにフレームが変化するアニメーションを説明しています。

public class DrawableAnimation extends Activity{
 
 AnimationDrawable mAnimationDrawable;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
     setContentView(R.layout.drawable_animation);
     //Drawable Animation: Changing Images ----------------------------------------------
     //Create AnimationDrawable
     mAnimationDrawable = new AnimationDrawable();
     //Set frames
     Drawable[] mFrame = new Drawable[3];
     mFrame[0] = getResources().getDrawable( R.drawable.img1);
     mFrame[1] = getResources().getDrawable( R.drawable.img2);
     mFrame[2] = getResources().getDrawable( R.drawable.img3);
    
     //Add frames to AnimationDrawable
     for(int i = 0; i < mFrame.length; i++){
      mAnimationDrawable.addFrame( mFrame[i],  250);
     }
     ImageView imageView = (ImageView) findViewById(R.id.imageView1);
     //Set the animation to background drawable
     imageView.setBackground(mAnimationDrawable);
     //Animation starts
     imageView.post(new Runnable(){
         public void run(){
          mAnimationDrawable.setOneShot(false);
          mAnimationDrawable.start();
        
         }
     });          
 }

まず最初に11行目でAnimationDrawableのコンストラクタをセットしています。
13行目では、フレームにDrawableリソースをセットします。各画像は、res/drawableの中に置きます。ここでは3フレームのアニメーションを行っています。
20行目では、各フレームをAnimationDrawableにセットしています。ここでのパラメータは以下の通りです。

addFrame(Drawable frame, int duration)

• Drawable frame: フレームとしてのDrawableリソース(画像)
• int duration: このフレームの継続時間

24行目では、ImageViewの背景画像として、アニメーションをセットしています。
onCreate()の中では、まだリソースがセットされていないので、直接onCreate()の中でアニメーションを始めることはできません。そこで、26行目のようにImageView.postを使用します。これは、ImageViewに背景画像がセットされたら呼ばれるので、ここで、AnimationDrawable.start()を指定します。