TechBooster

以前の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アニメーションの種類

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

アニメーションの作成

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属性

(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属性と関連のあるメソッド

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" />