[[ワーキンググループ/勉強会]]
* イメージをアニメーションで動かしてみよう [#nb3f5914]

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

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

** 手順１　プロジェクトを作成します [#s84ab974]
- "File -> New -> Project"を選択して、開いたダイアログで"Android Poroject"を選択して、"Next"ボタンを押します。
- 開いたダイアログで、以下のように入力してFinishボタンを押します。
-- Project Name: HelloAnimetion
-- Package name: jp.hews.helloanim
-- Activity Name: HelloAnimetionActivity
-- Application Name: ハローアニメーション

** 手順２　イメージをリソースディレクトリに配置します [#a7a1a9a7]
- 好きなイメージをpngフォーマットで用意して(たとえば、handson.png)、res/drawableディレクトリーにコピーする。EclipseのPackageExpolerにドロップすれば、コピーされます。
#ref(handson.png)
#ref(anim.001.Project.jpg)

** 手順３　レイアウトを決定します [#q5c30952]
- イメージビューを配置したレイアウトを作成します。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で記述します [#sbaa5d2e]
- 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>

** 手順５　イメージにアニメーションを適用します [#pa4eafdc]
- 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);
     }
 }
- アニメーションが終了した状態は、以下のようになっています。
#ref(anim.002.Finish.png)

** さらなる情報 [#xefc4db2]

- アニメーションのドキュメントは、以下に記述されています
-- http://code.google.com/android/reference/available-resources.html#animation
-- http://code.google.com/android/reference/android/view/animation/Animation.html