サイト移転のお知らせ:http://techbooster.org/に移転しました

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

11月 23, 2010   //   by @mhidaka   //   ユーザインターフェース  //  No Comments

以前の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" />

関連する記事:

Sponsored Link

Comments are closed.

技術書新刊 発売中

アンドロイドアカデミアには、CIやテスト、互換検証など実務に生きるノウハウをあつめています

技術書新刊 発売中

Android Next!はAndroid 7.0に対応したはじめての技術書です!


The Web Explorer 2はCSSの中央寄せやWebAudioなど未来を読み解く一冊です


Revised TypeScript in DefinitelylandはTypeScript 2.0(β)に対応した解説書です。インストールから型定義まで幅広くサポートしています


技術書をかこう!はエンジニアらしい執筆環境を構築、HowTo本です