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>
それぞれのファイルの違いは、Android:~XDelta=””の部分のみです。
android:fromXDeltaおよびandroid:toXDeltaの二つの属性はそれぞれ、アニメーションの開始座標と終了座標を表しています。
その他のパラメータについては、「Viewにアニメーションを付与する(Tweenアニメーション)」をご覧ください。
次に、styles.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アニメーション)」をご覧ください。
次に、styles.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); } }