2012年2月6日月曜日

(Animator)図形を動かす

図形を動かすには、OS3.0から導入された"Property Animation"という方法と、以前からある"View Animation"という方法がある。
Property Animationの方が汎用性が高く推奨される方法とのこと。
(http://developer.android.com/intl/ja/guide/topics/graphics/animation.html)

現在の端末は2.xが主流であるため、あまり使用されていないようだが、この記事の内容はProperty Animationについてである。


Property Animationでは、動きの描写は、ValueAnimatorオブジェクト、および、このオブジェクトに関するリスナーを使って記述される。

ValueAnimatorオブジェクト(android.animation.ValueAnimator)は、単にタイマー的な計算機であり、
「値Aから値BまでをT秒かけて変化していく」
という動作を基本とする。
この値の変化について、一定のスピードで変化するのか、あるいは後半加速するのかといった補間の仕方(InterPoletor)や、この動作を一度でやめるのか繰り返すのかなどといった、様々な設定を施すことができる。

ValueAnimatorの値の変化はAnimatorUpdateListener(android.animation.ValueAnimator.AnimatorUpdateListener)で感知することができる。
このクラスのonAnimationUpdateメソッドをオーバーライドしてinvalidateメソッドを実行することで、ValueAnimatorに連動して、適時onDrawを呼び出すことができる。

最後に、図形を描画するCanvas側では、図形の位置や大きさなどのプロパティをValueAnimatorの計算値から取得するようにする。

以下のコードは、円が画面上部から下方へ並行移動する。

import android.animation.ValueAnimator;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import android.animation.ValueAnimator.AnimatorUpdateListener;

public class CanvasSampleActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
((LinearLayout) findViewById(R.id.container)).addView(new MyView(this));
}

public class MyView extends View implements AnimatorUpdateListener {

ValueAnimator anim = null;

public MyView(Context context) {
super(context);
anim = ValueAnimator.ofFloat(100f, 500f);
anim.setDuration(3000);
anim.addUpdateListener(this);
anim.start();
}

@Override
public void onAnimationUpdate(ValueAnimator anim) {
invalidate();
}

@Override
public void onDraw(Canvas canvas) {
Paint paint = new Paint();
paint.setColor(0xff0000ff);
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(200f, (Float) anim.getAnimatedValue(), 50f, paint);
}

}

}


なお、R.layout.mainは以下のようになっている。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/container"
    android:background="#ffffffff">
</LinearLayout>

android:id="@+id/container"を定義している以外は、特に何もしていない。

0 件のコメント:

コメントを投稿