2013年11月27日水曜日

[Androidアニメーション] 4. View Animation

AndroidのAPIににおける2Dアニメーションの種類は主に3種類あります。

Property Animation

Android3.0(API level 11)からサポートされ、どんなオブジェクトにもアニメーションを行うことができる
View Animation
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:与えられた角度だけ回転
各アニメーションは、android.view.animationsの中にそれぞれクラスを持っています。すべてのアニメーションクラスは、抽象Animationクラスを拡張したものです。図1はこれらのクラスの階層を示しています。
図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);

13行目でアニメーションのコンストラクタを指定します。14行目の遅延時間setStartOffset(ms)、15行目のアニメーションの継続時間setDuration(ms)、16行目の繰り返し情報setRepeatCount()、17行目の繰り返しモードsetRepeatMode()などを指定して、最後に18行目のようにアニメーションを行いたいViewのstartAnimation()にアニメーションをセットすることで、アニメーションが始まります。
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 件のコメント:

コメントを投稿