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

画像をアニメーションさせる

11月 7, 2010   //   by kseto   //   アプリケーション  //  1 Comment

Androidでは簡単にアニメーションを使うことができます。

アニメーションの種類は以下のものがあります。

AlphaAnimation オブジェクトの透明度が変化するアニメーション
RotateAnimation オブジェクトの角度が変化するアニメーション
ScaleAnimation オブジェクトの大きさが変化するアニメーション
TranslateAnimation オブジェクトの位置が変化するアニメーション
AnimationSet 上記のアニメーションを組み合わせる

詳しい説明は続きからどうぞ。

それでは各アニメーションの使い方を順番に紹介していきます。
以下のようなImageViewオブジェクトに対してアニメーションを適用させてみます。

ImageView img = (ImageView) findViewById(R.id.ImageView01);

AlphaAnimation

オブジェクトの透明度を変化させるアニメーションです。
フェードイン・フェードアウトのような効果になります。

AlphaAnimation alpha = new AlphaAnimation(1, 0.1f); // 透明度を1から0.1に変化させる
alpha.setDuration(3000); // 3000msかけてアニメーションする
img.startAnimation(alpha); // アニメーション適用

AlphaAnimationのコンストラクタに渡すパラメータで透明度の変化の具合を指定します。
値の有効範囲は0.0〜1.0で、0.0で完全に透明に、1.0で完全に不透明になります。
上のサンプルコードでは透明度を1から0.1に変化させているので、徐々に透明になっていきます。

RotateAnimation

オブジェクトの角度を変化させるアニメーションです。
ぐるぐるとオブジェクトが回転するアニメーションになります。

RotateAnimation rotate = new RotateAnimation(0, 360, img.getWidth()/2, img.getHeight()/2); // imgの中心を軸に、0度から360度にかけて回転
rotate.setDuration(3000); // 3000msかけてアニメーションする
img.startAnimation(rotate); // アニメーション適用

RotateAnimationのコンストラクタに指定するパラメータは以下のようになっています。

RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY);

・float fromDegrees:回転の開始角度
・float toDegrees:回転の終了角度
・float pivotX:回転のX軸の値
・float pivotY:回転のY軸の値

上のサンプルコードではimgの中心を回転の軸として、0度から360度にかけて回転させています。

ScaleAnimation

オブジェクトの大きさを変化させるアニメーションです。
簡単にオブジェクトを拡大・縮小させることができます。

ScaleAnimation scale = new ScaleAnimation(1, 0.5f, 1, 0.5f); // imgを1倍から0.5倍に縮小
scale.setDuration(3000); // 3000msかけてアニメーションする
img.startAnimation(scale); // アニメーション適用

コンストラクタのパラメータは以下の通りです。

ScaleAnimation(float fromX, float toX, float fromY, float toY);

・float fromX:アニメーション開始時のXスケール
・float toX:アニメーション終了時のXスケール
・float fromY:アニメーション開始時のYスケール
・float toY:アニメーション開始時のYスケール

上のサンプルコードではimgを半分の大きさに縮小させています。

TranslateAnimation

オブジェクトの位置を変化させるアニメーションです。
オブジェクトが移動しているような効果になります。

TranslateAnimation translate = new TranslateAnimation(0, 100, 0, 100); // (0,0)から(100,100)に移動
translate.setDuration(3000); // 3000msかけてアニメーションする
img.startAnimation(translate); // アニメーション適用

コンストラクタのパラメータは以下の通りです。

TranslateAnimation(float fromX, float toX, float fromY, float toY);

・float fromXDelta:アニメーション開始時のX位置(移動量)
・float toXDelta:アニメーション終了時のX位置(移動量)
・float fromYDelta:アニメーション開始時のY位置(移動量)
・float toYDelta:アニメーション終了時のY位置(移動量)

上のサンプルコードではimgを(0,0)から(100,100)の位置に移動させています。

AnimationSet

上記のアニメーションを組み合わせることができます。

AnimationSet set = new AnimationSet(true);

RotateAnimation rotate = new RotateAnimation(0, 360, img.getWidth()/2, img.getHeight()/2); // imgの中心を軸に、0度から360度にかけて回転
set.addAnimation(rotate);

ScaleAnimation scale = new ScaleAnimation(1, 0.5f, 1, 0.5f); // imgを1倍から0.5倍に縮小
set.addAnimation(scale);

set.setDuration(3000); // 3000msかけてアニメーションする
img.startAnimation(set); // アニメーション適用

上のサンプルコードではimgを回転させながら縮小させています。

関連する記事:

Sponsored Link

1 Comment

技術書新刊 発売中

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

技術書新刊 発売中

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


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


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


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