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

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

Androidアプリ開発者のためのTips集。今回は、Androidアプリケーション開発におけるアニメーションについて紹介する。まずは、Tweenアニメーションの基本を学ぼう。

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

Tips概要と動作検証環境

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


Tips 13:Androidアプリ開発におけるTweenアニメーション

 基本通りに開発したシンプルなアプリケーションは、どうしても味気のないものになりがちだ――。

 そんなとき、ちょっとしたアニメーションを加えることで見栄えがグッと良くなる。今回は、Androidアプリケーション開発におけるアニメーションの基本について紹介する。

Androidのアニメーション

 Androidには、「Tweenアニメーション」と「Frameアニメーション」の2種類のアニメーションが用意されている。

 Tweenアニメーションは、移動・拡大縮小(拡縮)・回転・透過などを組み合わせてビューをアニメーションさせるものだ。そして、もう一方のFrameアニメーションは、パラパラ漫画やアニメーションGIFのように画像を切り替えることでアニメーションを実現するものだ。

 今回は、前者のTweenアニメーションについて紹介する。

Tweenアニメーションの基本

 Tweenアニメーションは、ビューの“見た目上(補足)”の位置や大きさを時系列に沿って変化させることでアニメーションを表現する。

 用途はいろいろと考えられるが、例えばTextViewに文字情報を表示する際、パッと文字を表示させるのではなく、じわりと浮き上がらせたり、ビューごと画面の外側から登場させたり、さらにそれらを組み合わせたりといった演出が可能である。

※補足:“見た目上”というのがポイント。実は、ビューの実際の位置や大きさは変わらない。


 Tweenアニメーションで見た目を変化させることができる要素は、以下の4つである。

  • AlphaAnimation(透過性を変化させる)
  • RotateAnimation(角度を変化させる)
  • ScaleAnimation(大きさを変化させる)
  • TranslateAnimation(位置を変化させる)

 どのアニメーションも「開始時の値」「終了時の値」「何ミリ秒かけて変化させるか」といった項目を設定する必要がある。また、上記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()の記述がない場合は、アニメーションが終了すると開始前の見た目に戻る(終了時の状態は保持されない)ということだ。

画像とテキストがじわりと浮かび上がる(1)画像とテキストがじわりと浮かび上がる(2) 画像1、画像2 画像とテキストがじわりと浮かび上がる

移動アニメーションの例

 移動を伴うアニメーションには、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);
    }


画像とテキストが画面の右側から現れる(1)画像とテキストが画面の右側から現れる(2) 画像3、画像4 画像とテキストが画面の右側から現れる

アニメーションの組み合わせ(1)

 前述の通り、アニメーションの組み合わせには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クラスについてのみ呼び出せばよい。これを実行してみると、ビューが画面右側からじわりと浮かび上がりながら現れる。

画面右側から、じわりと浮かび上がりながら出現 画像5 画面右側から、じわりと浮かび上がりながら出現

アニメーションの組み合わせ(2)

 アニメーションには、アニメーション開始までの待ち時間もミリ秒単位で設定できる。これを使用すると、アニメーションを順番に実行するような組み合わせも可能だ。

 回転・拡縮アニメーションの例をかねて、以下のようなサンプルを作成してみた。

例:画面右側からじわりと浮かび上がりつつ画面中央に移動し、回転しながら縮小して消えるアニメーション

    // 透過と移動のアニメーションを組み合わせる
    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 );
    }


画面右側からじわりと浮かび上がりつつ…… 画像6 画面右側からじわりと浮かび上がりつつ……
回転しながら縮小していく(1)回転しながら縮小していく(2) 画像7、画像8 回転しながら縮小していく

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

 ここまで見てきたようなアニメーションは、リソースとしてXMLで記述できる。「res」ディレクトリ以下に「anim」ディレクトリを作成して、その中にアニメーションを記述したXMLを配置する。

 例として、1つ前のサンプル(例:透過と移動のアニメーションを組み合わせる)をXMLで記述したものを示す。

例:透過と移動のアニメーションを組み合わせる(sample_anim.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リソースからのアニメーション読み込み

    // XMLリソースからのアニメーション読み込み
    void resourceAnimationTest(Context con, View v){
        // リソースからのアニメーション読み込み
        Animation anim = AnimationUtils.loadAnimation( con, R.anim.sample_anim );
 
        // アニメーション開始
        v.startAnimation(anim);
    }




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

Android コーナー

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

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


Copyright© 2017 ITmedia, Inc. All Rights Reserved.