Tweet

Viewにアニメーションを付与する(Tweenアニメーション) では、Viewにアニメーションを付与する例をご説明しました。

<?xml version="1.0" encoding="utf-8"?>
<!--Activity1のフェードアウトのアニメーション-->
<set xmlns:android="http://schemas.android.com/apk/res/android</a>"
android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="100%"
android:toXDelta="0%"
android:duration="300"
android:fillAfter="true"
android:fillEnabled="true"/>
</set>

<?xml version="1.0" encoding="utf-8"?>
<!--Activity2のフェードインのアニメーション-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="0%"
android:toXDelta="-100%"
android:duration="300"
android:fillAfter="true"
android:fillEnabled="true"/>
</set>

<?xml version="1.0" encoding="utf-8"?>
<!--Activity1がフェードアウトから戻ってくる場合のアニメーション-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="-100%"
 android:toXDelta="0%"
 android:duration="300"
 android:fillAfter="true"
 android:fillEnabled="true"/>
</set>

<?xml version="1.0" encoding="utf-8"?>
<!--Activity2の終了時のアニメーション-->
<set xmlns:android=http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="0%"
android:toXDelta="100%"
android:duration="300"
android:fillAfter="true"
android:fillEnabled="true"/>
</set>

次に、styleｓ.xmlファイルとthemes.xmlファイルを、それぞれvaluesフォルダ以下に作成します。

styles.xml

①act_open_enter_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<!--Activity1のフェードアウトのアニメーション-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="100%"
android:toXDelta="0%"
android:duration="300"
android:fillAfter="true"
android:fillEnabled="true"/>
</set>

②act_open_exit_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<!--Activity2のフェードインのアニメーション-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="0%"
android:toXDelta="-100%"
android:duration="300"
android:fillAfter="true"
android:fillEnabled="true"/>
</set>

(以下、Activity2がフォワード時に、バックキーでActivity2を終了した時のアニメーションを想定)

③act_close_enter_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<!--Activity1がフェードアウトから戻ってくる場合のアニメーション-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="-100%"
android:toXDelta="0%"
android:duration="300"
android:fillAfter="true"
android:fillEnabled="true"/>
</set>

④act_close_exit_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<!--Activity2の終了時のアニメーション-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="0%"
android:toXDelta="100%"
android:duration="300"
android:fillAfter="true"
android:fillEnabled="true"/>
</set>

それぞれのファイルの違いは、Android:~XDelta=””の部分のみです。

android:fromXDeltaおよびandroid:toXDeltaの二つの属性はそれぞれ、アニメーションの開始座標と終了座標を表しています。

その他のパラメータについては、「Viewにアニメーションを付与する(Tweenアニメーション)」をご覧ください。

次に、styleｓ.xmlファイルとthemes.xmlファイルを、それぞれvaluesフォルダ以下に作成します。

styles.xml

<?xmlversion="1.0"encoding="utf-8"?>
<resources>
<stylename="Animation.Activity"parent="android:Animation.Activity">
<itemname="android:activityOpenEnterAnimation">@anim/act_open_enter_anim</item>
<itemname="android:activityOpenExitAnimation">@anim/act_open_exit_anim</item>
<itemname="android:activityCloseExitAnimation">@anim/act_close_exit_anim</item>
<itemname="android:activityCloseEnterAnimation">@anim/act_close_enter_anim</item>
</style>
</resources>

themes.xml

<?xml version="1.0" encoding="utf-8"?></pre>
<resources>
<style name="slideAnim" parent="android:Theme">
<item name="android:windowAnimationStyle">@style/Animation.Activity</item>
</style>
</resources>

styles.xmlフォルダで、それぞれの要素にアニメーションを定義しています。

themes.xmlファイルで、windowAnimationStyle要素に、作成したアニメーションの定義を設定します。

マニフェストファイルへの定義
最後に、AndroidManifest.xmlファイルにて、アニメーションを設定したいActivityにthemeを定義します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="org.jpn.techbooster.sample.ActivityanimSample"
 android:versionCode="1"
 android:versionName="1.0">
 <application android:icon="@drawable/icon" android:label="@string/app_name">
 <activity android:name=".ActivityanimSample"
 android:label="@string/app_name"
 android:theme="@style/slideAnim">
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>
 <activity android:name=".AcitivityanimSample2"
 android:theme="@style/slideAnim">
 </activity>

 </application>
 <uses-sdk android:minSdkVersion="4" />

</manifest>

Activityの作成

なお今回サンプルとして作成したActivityのソースコードは以下の通りです。

ActivityanimSample画面にて指を左にフリックすると、アニメーションでActivityanimSample2に画面遷移を行うよう、シンプルに記述しています。

public class ActivityanimSample extends Activity {
 /** Called when the activity is first created. */
 private float actDownX;
 private float actDownY;
 private float actUpX;
 private float actUpY;

 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 }

 @Override
 public boolean onTouchEvent(MotionEvent event){
 //左方向に指をスライドさせた場合に画面遷移
 switch(event.getAction()){
 case MotionEvent.ACTION_DOWN:
 actDownX = event.getX();
 break;
 case MotionEvent.ACTION_MOVE:
 break;
 case MotionEvent.ACTION_UP:
 actUpX = event.getX();
 if(actDownX - actUpX > 100){
 Intent intent = new Intent(ActivityanimSample.this, AcitivityanimSample2.class);
 startActivity(intent);
 }
 break;
 }
 return false;

 }
}

public class AcitivityanimSample2 extends Activity {

 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.sub);
 }
}