Property Animation
Android3.0(API level 11)からサポートされ、どんなオブジェクトにもアニメーションを行うことができる
パラパラ漫画のようにフレームを連続再生することができる
View Animation
Viewsに回転、移動、拡大縮小、透明度変換などのアニメーションが行える
Viewsに回転、移動、拡大縮小、透明度変換などのアニメーションが行える
Drawable Animation
ここでは、Developer AndroidのView Animationの中身をかいつまんで、View Animationについて紹介します。
View Animationとは
View Animationでは、View上にTween Animationを表示することが出来ます。Tween Animationはスタートポイント、エンドポイント、サイズ、回転や共通の縦横比などのアニメーション情報を計算します。Tween AnimationはViewオブジェクトのコンテンツ上で、位置、サイズ、回転や透明度などの単純な変換を行うことが出来ます。例えば、TextViewオブジェクトにおいて、テキストの移動、回転、拡大縮小などができます。もし、TextViewに背景画像が設定してあれば、背景画像はテキストと一緒に変換されます。
アニメーションの手順はXMLかコードで書くことができます。ここではコードでのアニメーションの実行の仕方を紹介します。
View Animationはandroid.view.animation パッケージの中にあるクラスを使うことが出来ます。Viewに使えるアニメーションは4つあります。
- Scale Animation: サイズの変更
- Translate Animation: Viewの移動
- Alpha Animation:透明度の設定
- Rotate Animation:与えられた角度だけ回転
図1ではAnimationSetというクラスがありますが、このクラスは、アニメーションのグループをつくることができ、同時にいくつかのアニメーションを行ったり、連続してアニメーションを行ったりする時などに使うことができます。
 |
| 図1: View Animationのクラス階層 |
サンプルプログラム
サンプルプログラムでは、各アニメーションクラスの簡単な例をViewAnimationクラスとして書いています。それぞれのアニメーションにおいて、繰り返しモードsetRepeatMode()の設定で、逆戻りAnimation.REVERSEを指定しています。public class ViewAnimation extends Activity {
ImageView setImageView;
AnimationSet animationSet;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.view_animation);
//Scale Animation Sample---------------------------------------------------
ImageView scaleImageView = (ImageView) findViewById(R.id.imageView1);
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f, 0, 0);
scaleAnimation.setStartOffset(1000);
scaleAnimation.setDuration(2000);
scaleAnimation.setRepeatCount(Animation.INFINITE);
scaleAnimation.setRepeatMode(Animation.REVERSE);
scaleImageView.startAnimation(scaleAnimation);
//Translate Animation Sample----------------------------------------------
ImageView transImageView = (ImageView) findViewById(R.id.imageView2);
TranslateAnimation transAnimation = new TranslateAnimation(0, 50, 0, 20);
transAnimation.setDuration(3000);
transAnimation.setRepeatCount(Animation.INFINITE);
transAnimation.setRepeatMode(Animation.REVERSE);
transImageView.startAnimation(transAnimation);
//Alpha Animation Sample-------------------------------------------------
ImageView alphaImageView = (ImageView) findViewById(R.id.imageView3);
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
alphaAnimation.setDuration(3000);
alphaAnimation.setRepeatCount(Animation.INFINITE);
alphaAnimation.setRepeatMode(Animation.REVERSE);
alphaImageView.startAnimation(alphaAnimation);
//Set Animation Sample---------------------------------------------------
setImageView = (ImageView) findViewById(R.id.imageView5);
animationSet = new AnimationSet(false);
//Animation1
ScaleAnimation scaleAnimation1 = new ScaleAnimation(0.5f, 1.0f, 0.5f, 1.0f);
scaleAnimation1.setDuration(3000);
//Animation2
AlphaAnimation alphaAnimation1 = new AlphaAnimation(0.0f, 1.0f);
alphaAnimation1.setDuration(3000);
animationSet.addAnimation(scaleAnimation1);
animationSet.addAnimation(alphaAnimation1);
setImageView.startAnimation(animationSet);
//AnimationListener
animationSet.setAnimationListener(new Animation.AnimationListener() {
public void onAnimationStart(Animation animation) {
}
public void onAnimationRepeat(Animation animation) {
}
public void onAnimationEnd(Animation animation) {
setImageView.startAnimation(animationSet);
}
});
}
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
//Rotate Animation Sample ---------------------------------------------------
ImageView rotateImageView = (ImageView) findViewById(R.id.imageView4);
int centerX = (int)rotateImageView.getWidth()/2;
int centerY = (int)rotateImageView.getHeight()/2;
RotateAnimation rotateAnimation = new RotateAnimation(0, 20, centerX,centerY);
rotateAnimation.setDuration(3000);
rotateAnimation.setRepeatCount(Animation.INFINITE);
rotateAnimation.setRepeatMode(Animation.REVERSE);
rotateImageView.startAnimation(rotateAnimation);
}
}
アニメーションの設定
アニメーションの設定は、どのクラスでも同じような設定を行うことが出来ます。例としてScaleAnimationを上げて説明します。ImageView scaleImageView = (ImageView) findViewById(R.id.imageView1); ScaleAnimation scaleAnimation = new ScaleAnimation(0.5f, 1.0f, 0.5f, 1.0f, 0, 0); scaleAnimation.setStartOffset(1000); scaleAnimation.setDuration(3000); scaleAnimation.setRepeatCount(Animation.INFINITE); scaleAnimation.setRepeatMode(Animation.REVERSE); scaleImageView.startAnimation(scaleAnimation);
setRepeatCountにAnimation.INFINITEを指定すると無限にアニメーションを繰り返します。setRepeatMode()では、単純な繰り返しAnimation.RESTARTか逆戻りAnimation.REVERSEを設定することが出来ます。
Scale Animation
拡大縮小を行うには、ScaleAnimationを使用します。13行目のScaleAnimationのコンストラクタのパラメータは以下の通りです。サンプルプログラムでは、0.5倍から1倍に拡大しています。ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY);
- float fromX: アニメーション開始のXスケール
- float toX: アニメーション終了のXスケール
- float fromY: アニメーション開始のYスケール
- float toY: アニメーション終了のYスケール
- float pivotX 原点となるX座標位置
- float pivotY 原点となるY座標位置
Translate Animation
移動を行うには、TranslateAnimationを使用します。22行目のTranslateAnimationのコンストラクタのパラメータは以下の通りです。サンプルプログラムでは、元の位置(0, 0)からX座標に50ピクセル、Y座標に20ピクセル移動するアニメーションを指定しています。TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta);
- float fromXDelta: アニメーション開始時のView内のX座標
- float toXDelta: アニメーション終了時のView内のX座標
- float fromYDelta: アニメーション開始時のView内のY座標
- float toYDelta: アニメーション終了時のView内のY座標
Alpha Animation
透明度変化には、AlphaAnimationを使用します。30行目のAlphaAnimationのコンストラクタのパラメータは以下の通りです。サンプルプログラムでは、不透明から透明へ変化しています。ここでのパラメータの値は、0.0〜1.0を指定します。0.0は完全に透明、1.0は完全に不透明を示します。
AlphaAnimation (float fromAlpha, float toAlpha);
- float fromAlpha: アニメーション開始時の透明度を指定
- float toAlpha: アニメーション終了時の透明度を指定
Rotate Animation
回転には、RotateAnimationを使用します。75行目のRorateAnimationのコンストラクタのパラメータは以下の通りです。サンプルプログラムでは、20度の回転を指定しています。回転の中心座標をViewの中心に指定しています。
RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY);
- float fromDegrees: アニメーション開始時の回転角度
- float toDegrees: アニメーション終了時の回転角度
- float pivotX:回転の中心X座標
- float pivotY: 回転の中心Y座標
サンプルプログラムでは、RotateAnimationをOnWindowFocusChangedの中で指定しています。これは、OnCreate内では早過ぎてViewのgetWidth(), getHeight()の値を取ることができず0が帰ってきてしまうからです。OnWindowFocusChanged内で呼ぶことで、値を得ることが出来ます。
Animation Set
複数のアニメーションを同時に行う場合には、AnimationSetを使用します。サンプルプログラムでは、scaleAnimation1とAlphaAnimation1のアニメーションをセットしています。AnimationSetでは、setRepeatCountが効きません。繰り返しを行いたい場合は、AnimationListenerを使用して、アニメーションの終了時にアニメーションの開始を指定することができます。AnimationSet(boolean shareInterpolator);
- boolean shareInterpolator: Interpolatorを共有するかどうかを指定
AnimationListener
51行目のAnimationListenerでは、アニメーションの開始、リピート、終了を監視することができます。ただし、AnimationSetではonAnimationRepeatは動作しません。
0 件のコメント:
コメントを投稿