連載
» 2012年05月21日 11時52分 UPDATE

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

Androidアプリ開発者のためのTips集。前回のTweenアニメーションに引き続き、Androidアプリケーション開発におけるアニメーションについて解説する。今回はFrameアニメーションの基礎だ。

[秋本耕平(イーフロー),@IT MONOist]
Android Tips

Tips概要と動作検証環境

用途 便利
カテゴリ 部品外見
レベル 中級
動作確認環境 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コマの画像を用意した。

frame1frame2
frame3frame4
frame5 ※補足:これら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君がぴょんぴょんとジャンプを繰り返す。

Droid君がぴょんぴょんとジャンプ(1)Droid君がぴょんぴょんとジャンプ(2)Droid君がぴょんぴょんとジャンプ(3) 画像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 コーナー

Androidコーナー
「Android(アンドロイド)」の組み込み機器への適用からアプリ開発、レポート、ニュースなどさまざまな技術情報・最新動向をお届けする!!

>>コーナーTOPはこちらから


Copyright© 2017 ITmedia, Inc. All Rights Reserved.