勉強会

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

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

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

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

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

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

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

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

  • イメージビューを配置したレイアウトを作成します。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で記述します

  • 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 イメージにアニメーションを適用します

  • onCreateでアニメーションをイメージに適用すると、アプリケーション開始時にアニメーションがスタートします。
    	// アニメーションするイメージを取得
    	ImageView animWindow = (ImageView)findViewById(R.id.image_view);
    
    	// アニメーションリソースをロード
    	Animation anim = AnimationUtils.loadAnimation(this, R.anim.rotate);
    	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.rotate);
    	anim.setRepeatMode(Animation.RESTART);
    
    	// アニメーション開始
    	animWindow.startAnimation(anim);
        }
    }
  • アニメーションが終了した状態は、以下のようになっています。
    anim.002.Finish.png

さらなる情報

添付ファイル: fileanim.001.Project.jpg 90件 [詳細] fileanim.002.Finish.png 4634件 [詳細] filehandson.png 2958件 [詳細]