2010年10月4日月曜日

Android開発 - フェードインアニメーション

アプリケーション起動時にタイトルロゴをフェードインさせるページの実装方法です。


黒一色の画面から白バックのロゴ画像がフェードインします。

アニメーションの定義方法はこちらを参考にしました。
http://android.roof-balcony.com/resource/animation/

■res/anim/にアニメーション定義のXMLファイルを作成。



    android:duration="3000" 
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:interpolator="@android:anim/decelerate_interpolator"
    />


■レイアウトのXMLファイルは以下のとおりです。


android:id="@+id/MainLayout"
android:orientation="vertical"
android:layout_width="320dp"
android:layout_height="455dp"
android:background="#FFFFFF"
>


android:id="@+id/ImageLogo" 
android:src="@drawable/******" 
android:layout_gravity="center" 
android:layout_marginTop="180dp"
android:layout_width="272dp" 
android:layout_height="76dp" 
>

今回はLinearLayoutごとフェードインさせます。

■Javaファイルの記述

package ***********************************;

import android.app.Activity;
import android.os.Bundle;
import android.content.Intent;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.LinearLayout;

public class **** extends Activity implements AnimationListener{

private Animation fadeIn;
private LinearLayout mainLayout;
private Intent intent;

@Override
public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.****);

mainLayout = (LinearLayout)findViewById(R.id.MainLayout);

fadeIn = AnimationUtils.loadAnimation(this, R.anim.****);
fadeIn.setAnimationListener(this);
mainLayout.setAnimation(fadeIn);
}

@Override
public void onAnimationEnd(Animation animation) {

// フェードイン完了後次の画面へ
if (animation == fadeIn) {
intent = new Intent(this, ****.class);
startActivity(intent);
finish();
}

}

@Override
public void onAnimationRepeat(Animation animation) {

}

@Override
public void onAnimationStart(Animation animation) {

}
}

onCreate()時にレイアウトとアニメーションのXMLを指定し、setAnimationListenerにセットします。
対象のアニメーションが終了したときにonAnimationEnd()がコールされ、次のアクティビティに移動します。

このアクティビティをManifestファイルで起動アクティビティに指定すると、

起動 -> 画像のフェードイン表示 -> メイン画面(メニュー画面など)

といったよく見る流れの実装が可能です。

一旦アプリを中断し、再開した場合に再度ロゴアニメーションが表示されるのは鬱陶しいので
次のアクティビティを呼び出した後finish()をかけています。

画面遷移のアニメーションについてはXMLのみで実装する方法もあるらしいので、いずれ調査したいと思います。