Androidアプリ開発におけるFrameアニメーション：Androidアプリケーション開発者のためのTips集（14）
Androidアプリ開発者のためのTips集。前回のTweenアニメーションに引き続き、Androidアプリケーション開発におけるアニメーションについて解説する。今回はFrameアニメーションの基礎だ。
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コマの画像を用意した。
例：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君がぴょんぴょんとジャンプを繰り返す。
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集」の目次
Copyright © ITmedia, Inc. All Rights Reserved.