このエントリーをはてなブックマークに追加

2010年1月16日土曜日

Android Frame-by-Frame animation

[in Englis]
Today I'll write the article about when I was in the trouble about Android Frame-by-Frame Animation using several png image files.

In the short, Frame-by-Frame animation is like a flipbook using picture files.

First, I tried to write animation codes referring to Android Developer Reference, but it didn't work.
so I looked into the cause of it, and then I studied that Frame-by-Frame animation must be started after onCreate/onResume is finished on Activity life cycle.
Translate or rotate animations can be started in onCreate/onResume, but Frame-by-Frame animation cannot be done.

How to start Frame-by-Frame animation is that starting it in onWindowFocusChanged.
(It is easy solution, so if I find the any other better solution I'll write blog about this)

I'll show the sample codes.

・main.xml

<framelayout id="@+id/FrameLayout01" android="http://schemas.android.com/apk/res/android" layout_width="wrap_content" layout_height="wrap_content">
<imageview id="@+id/ImageView01" layout_height="wrap_content" layout_width="wrap_content" layout_gravity="top" background="@anim/frame_anim">
</imageview>
</framelayout>


・frame_anim.xml

<animation-list id="animation_sample" android="http://schemas.android.com/apk/res/android" oneshot="false">
<item duration="100" drawable="@drawable/anim01">
<item duration="100" drawable="@drawable/anim02">
<item duration="100" drawable="@drawable/anim03">
<item duration="100" drawable="@drawable/anim04">
<item duration="100" drawable="@drawable/anim05">
</animation-list>


・AnimActivity.java

package com.sample.frameanim;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.widget.ImageView;

public class AnimActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}

@Override
public void onWindowFocusChanged(boolean hasFocus) {
ImageView imageView1 = (ImageView) findViewById(R.id.ImageView01);
    AnimationDrawable animation1 =
(AnimationDrawable)imageView1.getBackground();
    if (hasFocus) {
      animation1.start();
    } else {
      animation1.stop();
    }
  }
}





[in Japanese]
pngファイルを複数使って、AndroidのFrame-by-Frameアニメーションをするサンプルアプリの作成で、はまったことを書きたいと思います。


Frame-by-Frameアニメーションとは、一言で言うと画像ファイルのパラパラ漫画です。(同一サイズの)複数の画像ファイルを次々と変えることでアニメーションを実現します。

先ず、Android Developer Referenceを参照して作ったのですが、全くアニメーション動作が開始されませんでした。
色々調べたところ、Frame-by-Frameアニメーションは、Activityのライフサイクルの中で、onCreate/onResumeが完了した後に実施する必要があるようです。
手っ取り早く動作を見たくて、他のtranslateやrotateのアニメーション同様に、onCreateの中でアニメーションをスタートしたのが原因でした。

取り急ぎの解決方法として
onWindowFocusChangedメソッド内で実行することです。
(他にも方法があれば追記していきたいと思います。)

下記は、onWindowFocusChangedメソッドを使って、Frame-by-Frameアニメーションを実現させたコードです。

・main.xml

<framelayout id="@+id/FrameLayout01" android="http://schemas.android.com/apk/res/android" layout_width="wrap_content" layout_height="wrap_content">
<imageview id="@+id/ImageView01" layout_height="wrap_content" layout_width="wrap_content" layout_gravity="top" background="@anim/frame_anim">
</imageview>
</framelayout>


・frame_anim.xml

<animation-list id="animation_sample" android="http://schemas.android.com/apk/res/android" oneshot="false">
<item duration="100" drawable="@drawable/anim01">
<item duration="100" drawable="@drawable/anim02">
<item duration="100" drawable="@drawable/anim03">
<item duration="100" drawable="@drawable/anim04">
<item duration="100" drawable="@drawable/anim05">
</animation-list>


・AnimActivity.java

package com.sample.frameanim;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.widget.ImageView;

public class AnimActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}

@Override
public void onWindowFocusChanged(boolean hasFocus) {
ImageView imageView1 = (ImageView) findViewById(R.id.ImageView01);
    AnimationDrawable animation1 =
(AnimationDrawable)imageView1.getBackground();
    if (hasFocus) {
      animation1.start();
    } else {
      animation1.stop();
    }
  }
}

0 件のコメント:

コメントを投稿