Viewにアニメーションを付与する(Tweenアニメーション)

以前のViewFlipperでアニメーションする(ViewAnimator) では、ViewFlipperにアニメーションをつける方法を紹介しました。今回はより一般的にViewにアニメーションをつける方法、アニメーションの種類を解説します。

アニメーションのタイプは大きく2つに分類できます。Tweenアニメーション(Animation)とFrameアニメーション(AnimationDrawable)です。

• Tweenアニメーション：1つのイメージを連続に変化させるタイプ
  • 移動、フェード、回転、拡大縮小、それらを組み合わせて変化させます
• Frameアニメーション：順番にイメージを並べて表示してアニメーションにするタイプ
  • 順番に表示させる画像をあらかじめ用意して、パラパラ漫画のように表示します

Tweenアニメーション

ここでは1つのイメージを連続的に変化させるTween Animationを解説します。アニメーションの動きはXMLとソースコードで定義できます。

1. アニメーションのもとになる動きを決める（移動、透明度、回転、拡大縮小）。
2. XMLやソースコードでアニメーションを記述（XMLの場合は属性で表現）
3. Viewにアニメーションを設定する

TweenアニメーションはAnimationクラスを使って表現されます。アニメーションの種類は5つあり、いずれもAnimationクラスを継承しています。

Tweenアニメーションの種類

アニメーションの種類	概要
AlphaAnimation	透明度を変更する
AnimationSet	アニメ要素を保持するコンテナ
RotateAnimation	回転する
ScaleAnimation	拡大・縮小を行う
TranslateAnimation	移動、変形を行うアニメーション

以下、アニメーションの作り方です

アニメーションの作成

XMLでのアニメーション例としてAlphaAnimation をつかってみましょう。使う前の注意として、アニメーション用のXMLリソースはRes/anim/ディレクトリに配置する必要があります。

Res/anim/motion.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="0.5" />
</set>

サンプルでポイントとなる箇所はXMLの4行目～6行目。AlphaAnimationの属性値である
・android:fromAlpha
・android:toAlpha
を使って透明度を0から0.5(半透明)に変化させています。AlphaAnimationは名前の通り、透明度の制御に特化していますが、Animation(親クラス)の属性値を利用して更に細かい制御が行えます。

Animation XML属性

属性名	概要
android:detachWallpaper	このViewがWallpaper(壁紙)の上に表示されているとき、壁紙のアニメーションをon/offできる
android:duration	実行時間(ms)
android:fillAfter	trueならアニメーションが終わった後の状態を保つ
android:fillBefore	trueならアニメーションが始まる前の状態を保つ
android:fillEnabled	trueならfillAfter、fillBeforeを有効化する
android:interpolator	アニメーションの動きをスムーズに補完する。
android:repeatCount	アニメーションの繰り返し回数
android:repeatMode	繰り返し動作設定（標準はループ）
android:startOffset	開始までのオフセット時間(ms)
android:zAdjustment	アニメーションしている間のコンテンツ順序をz値(奥行き)で調整する

(11/24 追記)android:fillEnabledの説明でfillBeforeも有効にする旨を記載しました。@youten_redo さんにご指摘いただきました。ありがとうございます！

Viewにアニメーションを設定する

Viewに対して、アニメーションを付与します。

        //Tweenアニメーションの適用
        ImageView img = (ImageView) findViewById(R.id.ImageView01);
        Animation animation= AnimationUtils.loadAnimation(this,R.anim.motion);
        img.startAnimation(animation);

View#startAnimation(Animation);を呼び出した段階でアニメーションの動作が開始します。

アニメーション表示後の状態を保持したい場合(animation#setFillAfter)

        //Tweenアニメーションの適用
        ImageView img = (ImageView) findViewById(R.id.ImageView01);

        Animation animation= AnimationUtils.loadAnimation(this,R.anim.motion);
        animation.setFillAfter(true);	//終了後を保持
        animation.setFillEnabled(true);
        img.startAnimation(animation);

サンプルコードを実行すると(Res/anim/motion.xmlのアニメーション終了状態を維持して)ImageView imgの透明度が0.5のままになります。

またXMLリソースを使わずに（動的に）ソースコードからアニメーションを作りたい場合は、
XMLリソースの属性値と対応するメソッドを利用する必要があります。

Animation XML属性と関連のあるメソッド

属性名	関連するAnimationクラスのメソッド
android:detachWallpaper	setDetachWallpaper(boolean)
android:duration	setDuration(long)
android:fillAfter	setFillAfter(boolean)
android:fillBefore	setFillBefore(boolean)
android:fillEnabled	setFillEnabled(boolean)
android:interpolator	setInterpolator(Interpolator)
android:repeatCount	setRepeatCount(int)
android:repeatMode	setRepeatMode(int)
android:startOffset	setStartOffset(long)
android:zAdjustment	setZAdjustment(int)

Tweenアニメーションの種類

コンテナ

AnimationSetクラス、XMLリソースのタグは<set>です。
アニメーションを格納するためのコンテナです。入れ子構造が可能です。

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@[package:]anim/interpolator_resource"
    android:shareInterpolator=["true" | "false"] >
    <set>
        ...
    </set>
</set>

属性はandroid:interpolatorとandroid:shareInterpolatorです。どちらもinterpolator(アニメーションの振る舞いをパターン化した便利ツール)を指定できます。interpolatorに関してはまた改めて解説を予定しています

透明度を変更する

AlphaAnimationクラス、XMLリソースのタグは<alpha>です。
フェードを行います。fromAlphaやtoAlphaには0~1.0を代入します。

    <alpha
        android:fromAlpha="float"
        android:toAlpha="float" />

拡大縮小する

ScaleAnimationクラス、XMLリソースのタグは<scale>です。
fromXScale~toYScaleは倍率です。1.0が等倍を示しています。Scaleが0.5であれば1/2倍です。
pivotX,Yは拡大縮小時の原点となる座標位置です

    <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float" />

移動、変形する

TranslateAnimationクラス、XMLリソースのタグは<translate>です。
水平または垂直方向への動きです。fromXからtoXへの移動量を相対的に-100%から100%で表します。

    <translate
        android:fromX="float"
        android:toX="float"
        android:fromY="float"
        android:toY="float" />

回転する

RotateAnimationクラス、XMLリソースのタグは<rotate>です。
回転方向の動きです。fromDegreesからtoDegreesへの回転量を度数で指定します。
pivotX,pivotYは回転の中心座標です。パーセント指定(50% etc)もしくは左端、上端からの相対座標で表します

    <rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />