ワーキンググループ/勉強会?

イメージをアニメーションで動かしてみよう †

Androidでは、pngフォーマットなどのイメージファイルをImageViewで表示することができます。

また、テキストビューや、イメージビューなどを、XMLで記述したアニメーションリソースにしたがって動作させることができます。

↑

手順１　プロジェクトを作成します †

  • "File -> New -> Project"を選択して、開いたダイアログで"Android Poroject"を選択して、"Next"ボタンを押します。
  • 開いたダイアログで、以下のように入力してFinishボタンを押します。
    • Project Name: HelloAnimetion
    • Package name: jp.hews.helloanim
    • Activity Name: HelloAnimetionActivity
    • Application Name: ハローアニメーション
↑

手順２　イメージをリソースディレクトリに配置します †

  • 好きなイメージをpngフォーマットで用意して(たとえば、handson.png)、res/drawableディレクトリーにコピーする。EclipseのPackageExpolerにドロップすれば、コピーされます。
    handson.png
    anim.001.Project.jpg
↑

手順３　レイアウトを決定します †

  • イメージビューを配置したレイアウトを作成します。res/layout/main.xmlを以下のように書き換えます。 
    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ImageView
    android:id="@+id/image_view"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/handson"
    />
</RelativeLayout>
  • ImageViewでイメージを表示するビューを作成します
  • android:src="@drawable/handson"で作成したイメージを指定します
↑

手順４　アニメーションをXMLで記述します †

  • resディレクトリーを選択して、File->New->Folderで「anim」フォルダーを作成します
  • 作成したanimフォルダーを選択して、File->New->Otherで、XMLフォルダーないので、XMLを選択してXMLファイルを好きな名前で作成します。たとえば、「rotate.xml」とします。
  • 動作を以下のように記述する 
    <?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillBefore="true"
    android:fillAfter="true" >
<translate 
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromXDelta="-100"
    android:toXDelta="100"
    android:fromYDelta="-100"
    android:toYDelta="100"
    android:duration="6000"
    android:fillBefore="false"
    android:fillAfter="true" 
    />
<rotate
    android:fromDegrees="0" 
    android:toDegrees="180"
    android:toYScale="0.0" 
    android:pivotX="50%" 
    android:pivotY="50%"
    android:startOffset="700"
    android:duration="400"
    android:fillBefore="false"
    android:fillAfter="true" 
    />
</set>
↑

手順５　イメージにアニメーションを適用します †

  • onCreateでアニメーションをイメージに適用すると、アプリケーション開始時にアニメーションがスタートします。 
    	// アニメーションするイメージを取得
	ImageView animWindow = (ImageView)findViewById(R.id.image_view);

	// アニメーションリソースをロード
	Animation anim = AnimationUtils.loadAnimation(this, R.anim.move);
	anim.setRepeatMode(Animation.RESTART);

	// アニメーション開始
	animWindow.startAnimation(anim);
  • 全体は以下のようになっています。 
    package jp.hews.helloanim;

import android.app.Activity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class HelloAnimetionActivity extends Activity {
	
    @Override
	public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
	// アニメーションするイメージを取得
	ImageView animWindow = (ImageView)findViewById(R.id.image_view);

	// アニメーションリソースをロード
	Animation anim = AnimationUtils.loadAnimation(this, R.anim.move);
	anim.setRepeatMode(Animation.RESTART);

	// アニメーション開始
	animWindow.startAnimation(anim);
    }
}
  • アニメーションが終了した状態は、以下のようになっています。
    anim.002.Finish.png
↑

さらなる情報 †