アニメーション（移動、拡大縮小、回転、透過率）

Android

（ブログ記事の一覧は「こちら」）

画像データをアニメーションさせる方法について学びましょう。

ここで学ぶこと

  • アニメーション
    • 移動アニメーション
    • 拡大縮小アニメーション
    • 回転アニメーション
    • 透過率アニメーション
    • アニメーションセット

参考書籍：

Androidプログラミングバイブル SDK 7/6/5/4対応／ソシム

例題1

基本的なアニメーションのプログラムを確認していきましょう。

作成するもの

移動、拡大縮小、回転、透過率のアニメーションは、それぞれ以下のように定義しています。（正確には、他にも定義の方法はあります。）
それぞれのアニメーションを作成します。

// 移動アニメーション
TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta);

// 拡大縮小アニメーション
ScaleAnimation(fromX, toX, fromY, toY, pivotX, pivotY);

// 回転アニメーション
RotateAnimation(fromDegrees, toDegrees, pivotX, pivotY);

// 透過率アニメーション
AlphaAnimation(fromAlpha, toAlpha);

レイアウト

  • ImageView
  • Button 複数個（アニメーションを開始するために使用します）

プログラム

res / drawable フォルダに「sample.png」をコピーしてください。
（PNGファイルはフリーの画像を見つけて用意してください。）

onCreate関数には、ImageViewとButtonについても記述しておいてください。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_sample09_main);

    final ImageView imageView = findViewById(R.id.imageView);
    imageView.setImageResource(R.drawable.sample);

}

それぞれのアニメーションのプログラムを確認していきましょう。
Buttonをクリックしたときにアニメーションが開始するようにプログラミングすると良いでしょう。

移動アニメーション

TranslateAnimation trans = new TranslateAnimation(0, 320, 0, 0);
trans.setDuration(500);
trans.setInterpolator(new LinearInterpolator());  // 等速
imageView.startAnimation(trans);

拡大縮小アニメーション

ScaleAnimation scale = new ScaleAnimation(1, 2, 1, 2, 120, 120);
scale.setDuration(500);
scale.setInterpolator(new AnticipateOvershootInterpolator()); // 変速
imageView.startAnimation(scale);

回転アニメーション

RotateAnimation rotate = new RotateAnimation(0, 360, 120, 120);
rotate.setDuration(500);
rotate.setInterpolator(new LinearInterpolator()); // 等速
imageView.startAnimation(rotate);

透過率アニメーション

AlphaAnimation alpha = new AlphaAnimation(1, 0);
alpha.setDuration(500);
alpha.setInterpolator(new LinearInterpolator());  // 等速
imageView.startAnimation(alpha);

setDurationメソッドは、アニメーションにかかる時間（ミリ秒）を引数に設定します。
setInterpolatorメソッドは、アニメーションの加速度の種類を設定します。詳しくは、上で紹介した参考書籍を参照してください。

実行、確認

それぞれのアニメーションの動作を確認してください。

例題2

複数のパターンのアニメーションを組み合わせる方法を確認してみましょう。

作成するもの

拡大と移動を同時に行うアニメーションを作成します。

レイアウト

  • ImageView
  • Button（アニメーションを開始するために使用します）

プログラム

AnimationSetクラスを使用すると、addAnimationメソッドで組み合わせたいアニメーションを追加することができます。

AnimationSet animSet = new AnimationSet(true);
animSet.setInterpolator(new LinearInterpolator());

// 拡大
ScaleAnimation scale = new ScaleAnimation(1, 2, 1, 2, 120, 120);
scale.setDuration(500);
animSet.addAnimation(scale);

// 移動
TranslateAnimation trans = new TranslateAnimation(0, 320, 0, 0);
trans.setDuration(500);
animSet.addAnimation(trans);

imageView.startAnimation(animSet);

実行、確認

拡大と移動のアニメーションが同時に行われることをを確認してください。

課題1

setRepeatCount(num) メソッドを使用すると、アニメーションを繰り返し行う回数を指定することができます。
例題1のそれぞれのアニメーションに対して、setRepeatCountメソッドを追加して、動作を確認してください。

課題2

移動アニメーションを使用して、画像を画面を1週（左上 → 右上 → 右下 → 左下 → 左上）するようなプログラムを作成してください。