[[ワーキンググループ/勉強会]] * イメージをアニメーションで動かしてみよう [#nb3f5914] Androidでは、pngフォーマットなどのイメージファイルをImageViewで表示することができます。 また、テキストビューや、イメージビューなどを、XMLで記述したアニメーションリソースにしたがって動作させることができます。 ** 手順1 プロジェクトを作成します [#s84ab974] - "File -> New -> Project"を選択して、開いたダイアログで"Android Poroject"を選択して、"Next"ボタンを押します。 - 開いたダイアログで、以下のように入力してFinishボタンを押します。 -- Project Name: HelloAnimetion -- Package name: jp.hews.helloanim -- Activity Name: HelloAnimetionActivity -- Application Name: ハローアニメーション ** 手順2 イメージをリソースディレクトリに配置します [#a7a1a9a7] - 好きなイメージをpngフォーマットで用意して、res/drawableディレクトリーにコピーする。EclipseのPackageExpolerにドロップすれば、コピーされます。 #ref(handson.png) #ref(anim.001.project.jpg) ** 手順3 レイアウトを決定します [#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"で作成したイメージを指定します ** 手順4 アニメーションを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> ** 手順5 イメージにアニメーションを適用します [#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)