TranslateAnimationクラスを利用した移動アニメーション - Movement animation using TranslationAnimation class -

丸や四角といった形の移動アニメーションの実現にはTranslateAnimationクラスが便利です。

A TranslateAnimation class is useful to code the movement animation of shape like a circle and a square, etc.


Viewでの移動アニメーション
移動を実現するために次のことを行いました。

(1) 移動元と移動先の設定
TranslateAnimationをインスタンス化する際に移動元と移動先を設定します。コンストラクタの引数は次のとおりです。
第一引数：移動元x座標
第二引数：移動先x座標
第三引数：移動元y座標
第四引数：移動先y座標

(2) 移動完了までの時間設定
移動アニメーションが開始して終了するまでの時間をsetDurationメソッドで指定します。引数にはlong型でミリ秒単位の時間を設定します。

(3) 移動アニメーションの開始
ViewクラスのstartAnimationメソッドに、TranslateAnimationオブジェクトを引数として渡すと、移動アニメーションが開始されます。


プログラム
タップしたら日の丸が画面の左側へ移動してフレームアウトするプログラムを作りました。Viewとして、背景を描画する「BackgroundView.java」と日の丸の移動アニメーションを実現する「AnimationView.java」を用意し、それら2つのViewを「Beta.java」がFrameLayoutを利用して重ねあわせています。


/LayoutTest/src/org/example/layout/Beta.java

package org.example.layout;

import android.app.Activity;
import android.os.Bundle;
import android.widget.FrameLayout;

public class Beta extends Activity{
     @Override
     public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          FrameLayout frameLayout = new FrameLayout(this);
          setContentView(frameLayout);
          frameLayout.addView(new BackgroundView(this));
          frameLayout.addView(new AnimationView(this));
     }
}

/LayoutTest/src/org/example/layout/BackgroundView.java

package org.example.layout;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

public class BackgroundView extends View{
     private int width;
     private int height;
     Paint background;

     public BackgroundView(Context context) {
          super(context);

          background = new Paint();
          background.setColor(0xffffffff);
     }

     @Override
     protected void onDraw(Canvas canvas) {
          canvas.drawRect(0, 0, width, height, background);
     }

     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
          width = w;
          height = h;
     }
}

/LayoutTest/src/org/example/layout/AnimationView.java

package org.example.layout;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.TranslateAnimation;

public class AnimationView extends View{
     private int width;
     private int circleWidth;
     private int circleHeight;
     Paint circlePaint;

     public AnimationView(Context context) {
          super(context);
          circlePaint = new Paint();
          circlePaint.setColor(0xffff0000);
     }

     @Override
     protected void onDraw(Canvas canvas) {
          canvas.drawCircle(circleWidth, circleHeight, 90, circlePaint);
     }

     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
          width = w;
          circleWidth = w / 2;
          circleHeight = h / 2;
     }

     @Override
     public boolean onTouchEvent(MotionEvent event) {

          switch(event.getAction()) {
          case MotionEvent.ACTION_DOWN:
               break;
          case MotionEvent.ACTION_UP:
               TranslateAnimation translate = new TranslateAnimation(0, -width, 0, 0);
               translate.setDuration(1000);
               startAnimation(translate);
               break;
          }

          return true;
     }
}

実行結果

プログラムを実行すると、最初は赤丸が画面中央に描かれますが、タップをするとすごい勢いで左側へと移動し、そのまま赤丸がフレームアウトします。アニメーションが終わると、また赤丸が画面中央に描かれます。

アニメーションってすばらしい！