用途 | 便利 |
---|---|
カテゴリ | 部品外見 |
レベル | 中級 |
動作確認環境 | Android 2.3.1(GingerBread) エミュレータにて動作確認 |
備考 | 今回のTipsは上記環境で動作確認・検証を行っています |
基本通りに開発したシンプルなアプリケーションは、どうしても味気のないものになりがちだ――。
そんなとき、ちょっとしたアニメーションを加えることで見栄えがグッと良くなる。今回は、Androidアプリケーション開発におけるアニメーションの基本について紹介する。
Androidには、「Tweenアニメーション」と「Frameアニメーション」の2種類のアニメーションが用意されている。
Tweenアニメーションは、移動・拡大縮小(拡縮)・回転・透過などを組み合わせてビューをアニメーションさせるものだ。そして、もう一方のFrameアニメーションは、パラパラ漫画やアニメーションGIFのように画像を切り替えることでアニメーションを実現するものだ。
今回は、前者のTweenアニメーションについて紹介する。
Tweenアニメーションは、ビューの“見た目上(補足)”の位置や大きさを時系列に沿って変化させることでアニメーションを表現する。
用途はいろいろと考えられるが、例えばTextViewに文字情報を表示する際、パッと文字を表示させるのではなく、じわりと浮き上がらせたり、ビューごと画面の外側から登場させたり、さらにそれらを組み合わせたりといった演出が可能である。
Tweenアニメーションで見た目を変化させることができる要素は、以下の4つである。
どのアニメーションも「開始時の値」「終了時の値」「何ミリ秒かけて変化させるか」といった項目を設定する必要がある。また、上記4つのアニメーションを任意に組み合わせ、利用するためのクラス(AnimationSet)が用意されている。
それでは、具体例として「じわりと浮き上がる」「画面の外側から現れる」という2つのアニメーションを見てみよう。
透過率を変化させるアニメーションには、AlphaAnimationクラスを使用する。以下にそのサンプルを示す。
// 透過アニメーションの例 void alphaAnimationTest( View v ){ AlphaAnimation alpha = new AlphaAnimation( 0.0f, // 開始時の透明度(0は完全に透過) 1.0f); // 終了時の透明度(1は全く透過しない) // 3秒かけてアニメーションする alpha.setDuration( 3000 ); // アニメーション終了時の表示状態を維持する alpha.setFillEnabled(true); alpha.setFillAfter (true); // アニメーションを開始 v.startAnimation(alpha); }
前述の通り、「開始時の値(透過率)」「終了時の値(透過率)」「何ミリ秒かけて変化するか」の3つのパラメータを設定している。さらにここでは、「setFillEnabled()」「setFillAfter()」という2つのメソッドを使用している。これらはコメントにある通り、アニメーション終了時の表示状態を維持するための記述だ。
今回は、透過状態からビュー本来の透過率に戻して終了するアニメーションなのであまり意味はないが、例えば、透過していない状態から完全に透明になって、その状態のまま終了するようなアニメーションの場合は、終了時の状態(完全に透明になった状態)を保持するために記述しなければならない。つまり、setFillEnabled()とsetFillAfter()の記述がない場合は、アニメーションが終了すると開始前の見た目に戻る(終了時の状態は保持されない)ということだ。
移動を伴うアニメーションには、TranslateAnimationクラスを使用する。なお、先ほどの透過アニメーションの場合と比べて大きな違いはないので、以下にサンプルと実行例のみを記載する。
// 移動アニメーションの例 void transAnimationTest( View v ){ TranslateAnimation trans = new TranslateAnimation( // 自分の幅の2倍左の位置から開始 Animation.RELATIVE_TO_SELF, 2, // 自分の幅の5倍左の位置(元の位置)で終了 Animation.RELATIVE_TO_SELF, 0, // 縦には移動しない Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0); // 2秒かけてアニメーションする trans.setDuration( 2000 ); // アニメーション終了時の表示状態を維持する trans.setFillEnabled(true); trans.setFillAfter (true); // アニメーションを開始 v.startAnimation(trans); }
前述の通り、アニメーションの組み合わせにはAnimationSetクラスを使用する。これもそれほど難しい話ではないので早速サンプルを示す。
// 透過と移動のアニメーションを組み合わせる void alphaPlusTransTest(View v){ // 透過アニメーション(3秒) AlphaAnimation alpha = new AlphaAnimation( 0.0f, 1.0f ); alpha.setDuration( 3000 ); // 移動アニメーション(2秒) TranslateAnimation trans = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 2, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0); trans.setDuration( 2000 ); // アニメーションの組み合わせ AnimationSet set = new AnimationSet( false ); set.addAnimation( alpha ); set.addAnimation( trans ); // アニメーション終了時の表示状態を維持する set.setFillEnabled(true); set.setFillAfter (true); // アニメーションを開始 v.startAnimation( set ); }
setFillEnabled()とsetFillAfter()は、AnimationSetクラスについてのみ呼び出せばよい。これを実行してみると、ビューが画面右側からじわりと浮かび上がりながら現れる。
アニメーションには、アニメーション開始までの待ち時間もミリ秒単位で設定できる。これを使用すると、アニメーションを順番に実行するような組み合わせも可能だ。
回転・拡縮アニメーションの例をかねて、以下のようなサンプルを作成してみた。
// 透過と移動のアニメーションを組み合わせる void timeLagAnimationTest(View v){ // 透過アニメーション(3秒) AlphaAnimation alpha = new AlphaAnimation( 0.0f, 1.0f ); alpha.setDuration( 3000 ); // 移動アニメーション(2秒) TranslateAnimation trans = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 2, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0); trans.setDuration( 2000 ); // 回転アニメーション RotateAnimation rotate = new RotateAnimation( // 0度から720度まで変化(2回転) 0, 720f, // 回転の中心位置は、ビューの中央 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); // アニメーション開始3秒後から、1秒かけてアニメーション rotate.setStartOffset( 3000 ); rotate.setDuration( 4000 ); // 縮小アニメーション ScaleAnimation scale = new ScaleAnimation( // 幅も高さも、1倍から0倍まで変化 1f, 0f, 1f, 0f, // 拡縮の中心は、ビューの中央 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f ); // アニメーション開始3秒後から、1秒かけてアニメーション scale.setStartOffset( 3000 ); scale.setDuration( 4000 ); // アニメーションの組み合わせ AnimationSet set = new AnimationSet( false ); set.addAnimation( alpha ); set.addAnimation( trans ); set.addAnimation( rotate ); set.addAnimation( scale ); // アニメーション終了時の表示状態を維持する set.setFillEnabled(true); set.setFillAfter (true); // アニメーションを開始 v.startAnimation( set ); }
ここまで見てきたようなアニメーションは、リソースとしてXMLで記述できる。「res」ディレクトリ以下に「anim」ディレクトリを作成して、その中にアニメーションを記述したXMLを配置する。
例として、1つ前のサンプル(例:透過と移動のアニメーションを組み合わせる)をXMLで記述したものを示す。
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false" android:fillEnabled="true" android:fillAfter="true"> <!-- 透過アニメーション --> <alpha android:fromAlpha="0" android:toAlpha="1" android:duration="3000" /> <!-- 移動アニメーション --> <translate android:fromXDelta="200%" android:toXDelta="0%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="2000" /> <!-- 回転アニメーション --> <rotate android:fromDegrees="0" android:toDegrees="720" android:pivotX="50%" android:pivotY="50%" android:startOffset="3000" android:duration="5000"/> <!-- 拡縮アニメーション --> <scale android:fromXScale="1" android:toXScale="0" android:fromYScale="1" android:toYScale="0" android:pivotX="50%" android:pivotY="50%" android:startOffset="3000" android:duration="5000"/> </set>
リソースとして作成したアニメーションを読み込むには、AnimationUtilsクラスを使用して、以下のように記述する。
// XMLリソースからのアニメーション読み込み void resourceAnimationTest(Context con, View v){ // リソースからのアニメーション読み込み Animation anim = AnimationUtils.loadAnimation( con, R.anim.sample_anim ); // アニメーション開始 v.startAnimation(anim); }
なお、今回紹介したサンプルプログラムはココから(TweenAnimationTest.zip)ダウンロード可能だ。実際に動いている様子などを確認したい方は、このサンプルプログラムを手元の端末などにインストールして動かしてみてほしい。
Copyright © ITmedia, Inc. All Rights Reserved.