ラベル Property Animation の投稿を表示しています。 すべての投稿を表示
ラベル Property Animation の投稿を表示しています。 すべての投稿を表示

2013年11月16日土曜日

[Androidアニメーション] 3. Property Animation のプログラム

Android APIには2DAnimationが3種類用意されています。Property Animation, View Animation,Drawable Animationです。これらの違いの説明は1. Android Animationの種類紹介しています。
ここでは主にObject Animatorを使ったProperty Animationのサンプルプログラムを紹介します。Property Aniamtionの詳細な説明は2. Property Animationの説明で紹介しています。

  1. Android Animationの種類
  2. Property Animationの説明
  3. Property Animationのプログラム
  4. View Animation の説明とプログラム
  5. Drawable Animationの説明とプログラム


Property Animationのサンプルプログラム

サンプルではオブジェクトをButton 1とButton2とし、プロパティをButton 1ではテキストカラー、Button 2ではx方向の移動距離とするアニメーションを行っています。



public class SamplePropertyAnimation extends Activity {
 
 private static final int RED = 0xffFF8080;
 private static final int BLUE = 0xff8080FF;
 Button button1;
 Button button2;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  
  setContentView(R.layout.propertyanimation_main);
  
  //Property Animation: Changing TextColor
  button1 = (Button) findViewById(R.id.btn1);
  ObjectAnimator colorAnimator = ObjectAnimator.ofInt(button1,"textColor", RED, BLUE);
  colorAnimator.setDuration(3000);
  colorAnimator.setEvaluator(new ArgbEvaluator());
  colorAnimator.setRepeatCount(ValueAnimator.INFINITE);
  colorAnimator.setRepeatMode(ValueAnimator.REVERSE);
  colorAnimator.start();
     
  //Property Animation: Translation
  button2 = (Button) findViewById(R.id.btn2);
  ObjectAnimator transAnimator = ObjectAnimator.ofFloat(button2, "x", 0f, 100f);
  transAnimator.setDuration(5000);
  transAnimator.setRepeatCount(2);
  transAnimator.setInterpolator(new BounceInterpolator());
  transAnimator.addListener(new AnimatorListenerAdapter(){
   @Override
   public void onAnimationEnd(Animator animation){
    //Write processing after animating
    button2.setVisibility(View.GONE);
   } 
  });
  transAnimator.start();
  
 }

}
16行目でObjectAnimatorにアニメーションしたいオブジェクトとプロパティを設定します。
ObjectAnimator colorAnimator = ObjectAnimator.ofInt(button1,"textColor", RED, BLUE);
1.ターゲットとなるオブジェクト:ここではButtonを設定。
2.プロパティの名前(String):ここでは"textColor"を設定。
3.開始のプロパティの値
4.終了時のプロパティの値
17行目でアニメーションの継続時間をmsで設定します。デフォルトでは300msが設定されています。 

18行目でEvaluatorを設定します。Evaluatorsは与えられたプロパティ値をどのように計算するか指定します。ここでは色の変化をアニメーションするので、ArgbEvaluator()を設定しています。Evaluatorの種類は以下の通りです。
  • IntEvaluator: int プロパティの値を計算。
  • FloatEvaluator:  floatプロパティの値を計算。
  • ArgbEvaluator:  16進数で表されるカラープロパティの値を計算。
  • TypeEvaluator: カスタマイズのエバリュエータを作ることが出来るインターフェース。もし、int, float, colorではないオブジェクトプロパティにアニメーションをしたい場合、オブジェクトプロパティの値をどのように計算をするか指定することができます。

21行目でアニメーションをスタートします。

28行目ではアニメーションの速度を示すInterpolatorを設定しています。Interpolatorはアニメーションで指定された値がタイム機能としてどのように計算されるか定義することができます。例えば、全体のアニメーションを通して、連続的に起こるアニメーションを指定するか、またはアニメーションの始まりと終わりで加速するようなの不連続的なアニメーションを指定するかなど選択できます。android.view.animationに含まれるInterpolatorは以下の種類があります。
  • AccelerateDecelerateinterpolator: 最初最後がゆっくりになり、真ん中で加速する。 
  • AccelerateInterpolator: ゆっくりで始まり、徐々に加速して行く。 
  • AnticipateInterpolator: 開始時に逆方向にためる。 
  • AnticipateOvershootInterpolator:  開始時に逆方向にため、終了時にはみ出す。 
  • BounceInterpolator: 終了時にバウンドする。 
  • AnticipateOvershootInterpolator: 開始時に逆方向にため、終了時にはみ出す。 
  • CycleInterpolator: 指定された回数アニメーションを繰り返す。 
  • DecelerateInterpolator: 開始時に素早く徐々に速度を落とす。 
  • LinearInterpolator: 一定に変化させる。 
  • OvershootInterpolator: 終了時にはみ出す。
  • TimeInterpolator: カスタマー実装を行う。
29行目ではAnimationListenersを設定しています。これは、アニメーションが行われている間のイベントを監視することができます。例では、アニメーション終了時にボタンを消去しています。Listenersでは以下のイベントをキャッチすることができます。
  • onAnimationStart() アニメーション開始時に呼ばれる。
  • onAnimationEnd() アニメーション終了時に呼ばれる。
  • onAnimationRepeat() アニメーション繰り返し時に呼ばれる。
  • onAnimationCancel() キャンセル時に呼ばれる。このとき、onAnimationEnd()も同時に呼ばれる。


2013年11月15日金曜日

[Androidアニメーション] 2. Property Animationの説明

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

Property Animation
Android3.0(API level 11)からサポートされ、どんなオブジェクトにもアニメーションを行うことができる
View Animation
Viewsに回転、移動、拡大縮小、透明度変換などのアニメーションが行える
Drawable Animation
パラパラ漫画のようにフレームを連続再生することができる

ここでは、Developer AndroidのProperty Animationの中身をかいつまんで、Property Animationについて紹介します。サンプルプログラムについては、Property Animationのサンプルプログラムの説明で紹介しています。

Property Animationとは

Android3.0(API level 11)からサポートされ、Viewに限らず、どんなオブジェクトのプロパティにも指定した時間間隔で、アニメーションを行うことができます。ここでいうプロパティとはアニメーションに必要な設定値を指しています(例えば、色の変化値、透明度など)。このシステムは拡張性があり、カスタムタイプのプロパティにも適しています。Property Animationには以下のようなアニメーション機能を定義することができます。
継続時間(Duration): アニメーションの継続時間を指定することが出来ます。デフォルトは300msです。

補間時間(Time interpolation): アニメーションの現在の経過時間の機能として、プロパティの値がどのように計算されるか指定することが出来ます。
繰り返し(Repeat count and behavior): アニメーションの繰り返し回数や振る舞いなどを指定することが出来ます。

アニメーションのセット機能(Animator sets): 複数のアニメーションをグループ化して表示することができます。連続回数や、遅延などを指定することができます。
フレーム更新の遅延(Frame refresh delay): フレーム更新の時間を指定することが出来ます。デフォルトの設定は10msごとですが、アプリケーションのスピードに依存します。

Property Animationの動き

アニメーションがどのように行われるか簡単な例を紹介します。図1はプロパティxを持つオブジェクトを示しています。ここでプロパティxは画面のx方向への位置を表しているとします。アニメーションの継続時間を40msに設定し、移動距離を40pixelsとします。すると10 msごと、フレームが更新され10pixelsごとx方向にオブジェクトが移動します。この例では、補間時間の設定に、一定のスピードで物体が動くlinear interpolationを指定しています。

図1.Linear Interpolationの例

またスピードが変化するnon-linear interpolationも指定することが出来ます。図2はアニメーションの開始時に加速をし、中間からまた徐々に最後まで加速をするというアニメーションを示しています。オブジェクトは40msに40pixels移動しますが、速度が変化しています。


図2.non-linear Interpolationの例

Property Animationが上のようなアニメーションをどのように計算しているか説明していきます。図3はメインクラスと他のクラスの関係を示しています。


図3.アニメーションの計算の仕方

ValueAnimatorオブジェクトは継続時間やプロパティの現在の値などのアニメーションのタイミングを監視しています。ValueAnimatorはアニメーションの補間時間を定義しているTimeInterpolator、プロパティの値の計算方法を定義するTypeEvaluatorをカプセル化しています。例えば、図2ではTimeInterpolatorはAccelerateDecelerateInterpolatorをTypeEvaluatorにはIntEvaluatorが設定されています。

アニメーションを開始するには、ValueAnimatorを作り、アニメーションしたいプロパティの最初と最後の値を設定します。start()を呼ぶとアニメーションが始まります。アニメーションの間、ValueAnimatorはアニメーションの継続時間とどれくらい経過したかで、0から1の間でその割合を計算します。経過割合はアニメーションがどれくらい経過したかを0が0%を1が100%で示しています。例えば図1では、t=10での経過割合は全体の時間が40msなので、0.25になります。

ValueAnimatorが経過割合を計算しているとき、補間割合を計算するために、現在セットされているTimeInterpolatorが呼ばれます。補間割合はセットされた時間補間を考慮して新しい割合を時間補間にセットします。例えば図2でじゃ、アニメーションはゆっくり加速するので、t=10のとき、時間補間よりも小さい補間割合0.15となります。図1では補間割合は時間補間と同じように一定となります。

補間割合が計算されるときValueAnimatorはアニメーションの補間割合、始まりの値、終わりの値をもとに、プロパティの値を計算するために、適切なTypeEvaluatorを呼びます。例えば図2では補間割り肺はt=10msの時に0.15なので、この時間でのプロパティ値は0.15x(40 - 0)=6となります。

Property AnimationとView Animationの違いView AnimationシステムはViewオブジェクトにのみアニメーションを行うことが出来ます。もし、Viewオブジェクト以外にアニメーションを行いたい場合は、自信のコードを実行しなければいけません.View Animation システムは背景色の変更などはできず、Viewの回転や拡大縮小などアニメーションが限られています。さらにView Animationのデメリットは、実際のViewではなく表示されたViewのみを修正します。例えば、スクリーン上にボタンが動くアニメーションを行った場合、現在ある位置でボタンをクリックしても反応しません。自信でこれを修正する必要があります。

Property Animation システムはこれらの制約が取り除かれ、どんなオブジェクトのどんなプロパティにもアニメーションを行うことができ、オブジェクト自身も修正されます。Property Animationシステムはまたアニメーション実行においてさらにロバストになっています。ハイレベルで、animatorにアニメーションをしたいプロパティ(例えば色、位置やサイズなど)を指定をして複数のanimatorの同期や補間などのアニメーションのアスペクトを定義することができます。

View Animationシステムは短いセットアップ時間と少ないコードで設定できます。もしView Animationで自信のアニメーションが行えるのであればProperty Animationを使う必要はありません。異なった状況において両方のアニメーションシステムを使うことも可能です。

APIの概要

Property AnimationシステムのAPIはandroid.animationで定義されています。View Animationシステムではandroid.view.animationの中で、多くの補間機能が既に定義されていますが、Property Animationシステムでも同じようにこれらの機能を使うことが出来ます。以下では、Property Animationシステムの主な構成要素を示しています。

Animator クラスはアニメーションを構成する上で基本的なメソッドを定義したスーパークラスです。Animatorクラスは抽象クラスと定義されているため、直接インスタンス化することは出来ないので、通常Animatorクラスのサブクラスを使用します。サブクラスは主に3つ、ValueAnimator, ObjectAnimator, AnimatorSetがあります。主に、オブジェクトの属性などを設定するのには、ObjectAnimatorクラスを使います。

ValueAnimator

ValueAnimatorは、Property Animationのメインとなるタイミングエンジンです。プロパティ値を計算し、各アニメーションの詳細、繰り返し情報やイベントのアップデートを受け取るリスナーを含んでいます。アニメーションは、主に2つの部分に分けられます。アニメーション値の計算とアニメーションされるオブジェクトとプロパティにそれらの値を設定することです。ValueAnimatorでは、オブジェクトとプロパティに値を設定することができないので、自信のロジックでアニメーションをしたいオブジェクトに値をアップデートしていく必要があります。

ObjectAnimator

ValueAnimationのサブクラスで、ターゲットオブジェクトを設定することが出来ます。このクラスはアニメーションの値を計算する時に,それに応じてプロパティををアップデートします。ターゲットとなるオブジェクトにアニメーション値を設定できるので、簡単にアニメーションを行うことが出来ます。しかし、OjbectAnimationは現在のターゲットオブジェクトに特定のアクセッサーの方法を要求する場合に制限出てくるので、その時にはValueAnimationを直接使います。

AnimationSet

アニメーションをグループ化することができます。アニメーションの同時表示や連続表示、また指定した遅延時間後などを設定することが出来ます。

[Androidアニメーション] 1. アニメーションの種類

Androidフレームワークには、Android 3.0からサポートされているProperty Animationと従来からサポートされているView Animationがあります。Property AnimationはView Animationよりも柔軟性が高く多くの機能を持っているので、使いやすいと言えます。これらの2つのシステムに加えてDrawable Animationがあります。Drawable Animationではリソースをロードし、ぱらぱら漫画のように、連続したフレームで画像を表示することが出来ます。

Property Animation

Android3.0(API level 11)からサポートされ、Viewsに限らず、どんなオブジェクトのプロパティにも指定した時間間隔で、アニメーションを行うことができます。ここでいうプロパティとはアニメーションに必要な設定値を指しています(例えば、色の変化値、透明度など)。このシステムは拡張性があり、カスタムタイプのプロパティにも適しています。
サンプルプログラムの説明

View Animation

View Animationは、従来のシステムで、Viewsにのみアニメーションを行うことが出来ます。設定が簡単で、Viewsの移動、拡大縮小、透過度の変化など、基本的な機能を備えています。
サンプルプログラムの説明

Drawable Animation

Drawable Animationは、Drawable リソースを次から次へと表示することが出来きます。パラパラ漫画のような連続的なアニメーションを行うことが出来ます。
サンプルプログラムの説明




サンプルプログラムは、各アニメーションを最も簡単な例で示しています。詳細は各アニメーションの紹介ページ(Property Animation, View Animation, Drawable Animation)で説明しています。参考にしてください。


public class SampleAnimation extends Activity {
 
 private static final int RED = 0xffFF8080;
 private static final int BLUE = 0xff8080FF;
 
 AnimationDrawable mAnimationDrawable;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  
  setContentView(R.layout.activity_main);
  
  //Property Animation: Changing TextColor-------------------------------------
  Button btnColor = (Button) findViewById(R.id.btncolor);
  //Define an object and property in ObjectAnimator 
  ObjectAnimator animColor = ObjectAnimator.ofInt(btnColor,"textColor", RED, BLUE);
  //Set duration time (ms)
  animColor.setDuration(3000);
  //Set Evaluator, how to calculate the specified values.
  animColor.setEvaluator(new ArgbEvaluator());
  //Set repeat count
  animColor.setRepeatCount(ValueAnimator.INFINITE);
  //Set repeat mode
  animColor.setRepeatMode(ValueAnimator.REVERSE);
  //Animation starts
  animColor.start();
  
  //View Animation: Changing Transparency--------------------------------------
  Button btnAlpha = (Button) findViewById(R.id.btnalpa);
  //Set a value of transparency
  AlphaAnimation alp1 = new AlphaAnimation(1.0f, 0.0f);
  //Set duration time (ms)
  alp1.setDuration(3000);
  //Set repeat count
  alp1.setRepeatCount(Animation.INFINITE);
  //Animation starts
  btnAlpha.startAnimation(alp1);
     
  //Drawable Animation: Changing Images ----------------------------------------------
  //Create AnimationDrawable
  mAnimationDrawable = new AnimationDrawable();
  //Set frames
  Drawable[] mFrame = new Drawable[2];
  mFrame[0] = getResources().getDrawable( R.drawable.imgcat1);
  mFrame[1] = getResources().getDrawable( R.drawable.imgcat2);
  //Add frames to AnimationDrawable
  for(int i = 0; i < mFrame.length; i++){
   mAnimationDrawable.addFrame( mFrame[i],  200);
  }
  ImageView imageView = (ImageView) findViewById(R.id.image);
  //Set the animation to background drawable
  imageView.setBackgroundDrawable(mAnimationDrawable);
  //Animation starts
  imageView.post(new Runnable(){
      public void run(){
       mAnimationDrawable.setOneShot(false);
    mAnimationDrawable.start();
    
      }
  });
  
 }

}