

用途	便利
カテゴリ	部品外見
レベル	中級
動作確認環境	Android 2.3.1（GingerBread）エミュレータにて動作確認
備考	今回のTipsは上記環境で動作確認・検証を行っています

Tips 14：Androidアプリ開発におけるFrameアニメーション

　前回のTips「Tweenアニメーション」に引き続き、今回もAndroidのアニメーション処理を紹介する。

　今回は、パラパラ漫画やアニメーションGIFのような画像切り替えによりアニメーションを実現する「Frameアニメーション」についてだ。

Frameアニメーション

　前回紹介したTweenアニメーションは、ビューの“見た目上”の位置、サイズ、回転角などを時系列に沿って変化させることでアニメーションを表現するものであった。

　しかし、一般的に「アニメーション」と言えば、1コマ1コマ少しずつ違った絵を切り替えて、あたかも動いているかのように見せる手法、イメージとしては、アニメーションGIFのようなものを想像するのではないだろうか。

　Androidアプリケーション上で、このようなアニメーションを実現する手法が今回紹介するFrameアニメーションだ。

Frameアニメーションの基本

　Frameアニメーションを扱うには、AnimationDrawableクラスを使用する。このクラスのオブジェクトは、名前が示す通り“Drawable”としてビューの背景などに設定し、動く背景画像として使用できる。

　AnimationDrawableには、addFrame()というメソッドが用意されており、表示する画像と時間（ミリ秒単位）を設定し、1コマずつフレームを追加していく。特に難しい記述はないので、早速サンプルを見てみよう。なお、今回はアニメーション用に以下の5コマの画像を用意した。

※補足：これら5点の画像は、実際はPNGファイル形式で利用する。

例：Frameアニメーションのテスト

    // Frameアニメーションのテスト
    void frameAnimationTest( Context con, View v ){
        AnimationDrawable anim = new AnimationDrawable();
 
        // 画像の読み込み //
        Drawable frame1 = con.getResources().getDrawable( R.drawable.frame1 );
        Drawable frame2 = con.getResources().getDrawable( R.drawable.frame2 );
        Drawable frame3 = con.getResources().getDrawable( R.drawable.frame3 );
        Drawable frame4 = con.getResources().getDrawable( R.drawable.frame4 );
        Drawable frame5 = con.getResources().getDrawable( R.drawable.frame5 );
 
        // 画像をアニメーションのコマとして追加していく
        anim.addFrame( frame1,  60 );
        anim.addFrame( frame2,  60 );
        anim.addFrame( frame3,  70 );
        anim.addFrame( frame4,  80 );
        anim.addFrame( frame5, 120 );
        anim.addFrame( frame4,  80 );
        anim.addFrame( frame3,  70 );
        anim.addFrame( frame2,  60 );
        anim.addFrame( frame1,  60 );
 
        // 繰り返し設定
        anim.setOneShot(false);
 
        // ビューの背景画像にアニメーションを設定
        v.setBackgroundDrawable( anim );
 
        // アニメーション開始
        anim.start();
    }

　AnimationDrawableのオブジェクトは、普通にnewして作成している。そして、あらかじめ用意しておいた画像（Drawable）を読み込み、どの画像を何ミリ秒ずつ表示するのか、1コマずつアニメーションを設定している。

　その後、繰り返し設定を行ってから、AnimationDrawableをビューの背景に指定して、アニメーションを開始する。アニメーションの開始には、AnimationDrawable#start()メソッドを使用しているが、引数などは特にない。なお、上記サンプルに記述はないが、アニメーションを停止させたい場合は、AnimationDrawable#stop()メソッドを呼ぶ。

　実行すると、用意した画像通りにDroid君がぴょんぴょんとジャンプを繰り返す。

画像1、画像2、画像3　Droid君がぴょんぴょんとジャンプする

XMLによるアニメーションの記述

　前回のTweenアニメーションでもそうだったが、FrameアニメーションもリソースとしてXMLで記述することができる。むしろ、Frameアニメーションの場合、XMLで用意しておいた方が記述も使用もずっと簡単だ。

　FrameアニメーションのXMLは、画像と同じように「drawable」ディレクトリ以下に作成する。先ほどのサンプルと同じアニメーションをXMLで記述すると、以下のようになる。

例：Frameアニメーションのテスト（droid_jump.xml）

    <?xml version="1.0" encoding="utf-8"?>
    <animation-list
        xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/frame1" android:duration="60" />
        <item android:drawable="@drawable/frame2" android:duration="60" />
        <item android:drawable="@drawable/frame3" android:duration="70" />
        <item android:drawable="@drawable/frame4" android:duration="80" />
        <item android:drawable="@drawable/frame5" android:duration="120" />
        <item android:drawable="@drawable/frame4" android:duration="80" />
        <item android:drawable="@drawable/frame3" android:duration="70" />
        <item android:drawable="@drawable/frame2" android:duration="60" />
        <item android:drawable="@drawable/frame1" android:duration="60" />
    </animation-list>

　リソースとして作成したFrameアニメーションを使用する際は、以下のように記述する。

例：XMLリソースからのFrameアニメーションを読み込む

    // Frameアニメーションを XML から読み込む
    void frameAnimationFromXMLTest( View v ){
 
        // リソースからアニメーションを読み込み、ビューに設定
        v.setBackgroundResource( R.drawable.droid_jump );
 
        // ビューからアニメーションを取り出し
        AnimationDrawable anim = (AnimationDrawable)v.getBackground();
 
        // アニメーション開始
        anim.start();
    }

　Frameアニメーションは通常のDrawableと同じように扱えてしまうので、読み込みは、View#setBackgroundResource()で済ませられる。ただし、そのままだとアニメーションを開始できないので、ビューから背景に設定したAnimationDrawableを取り出して、start()メソッドを呼ぶ必要がある。

　イチからAnimationDrawableを作る場合と比べ、とても簡単で分かりやすい。実行してみると、前述のサンプルと全く同じ動きになる。

　なお、今回紹介したサンプルプログラムはココから（FrameAnimationTest.zip）ダウンロード可能だ。実際に動いている様子などを確認したい方は、このサンプルプログラムを手元の端末などにインストールして動かしてみてほしい。

≫連載「Androidアプリケーション開発者のためのTips集」の目次