Activityにアニメーションを付与する(TranslateAnimation)

| 2011年2月5日 | Android, ユーザインターフェース | No Comments
Bookmark this on Hatena Bookmark

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

Androidでは、Viewだけでなく、Activityそのものにもアニメーションを付与することができます。
今回は、指でActivityを横方向にスライドさせる方法を例に、Activityにアニメーションを付与する方法をご説明します。
それでは続きをどうぞ。。。
アニメーションの定義
Viewにアニメーションを付与する(Tweenアニメーション)でもあった通り、アニメーションにはalpha、rotate、scale、set、translate等の種類があります。
今回は、その中からTranslateAnimationを例に取って説明します。
Viewへのアニメーションの付与と同様、Activityのアニメーション定義ファイルも、res/animフォルダ内に作成する必要があります。
今回はActivity1を右から左にスライドしてフェードアウトさせ、Activity2を右から左にフェードインして起動させるような動作を想定します。
このとき、resフォルダ以下に、次のようにanimファイルを作成します。
①act_open_enter_anim.xml
1
2
3
4
5
6
7
8
9
10
<?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>
②act_open_exit_anim.xml
1
2
3
4
5
6
7
8
9
10
<?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をfinish()した時のアニメーション設定)
③act_close_enter_anim.xml
1
2
3
4
5
6
7
8
9
10
<?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
1
2
3
4
5
6
7
8
9
10
<?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

①act_open_enter_anim.xml

1
2
3
4
5
6
7
8
9
10
<?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

1
2
3
4
5
6
7
8
9
10
<?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

1
2
3
4
5
6
7
8
9
10
<?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

1
2
3
4
5
6
7
8
9
10
<?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

1
2
3
4
5
6
7
8
9
<?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

1
2
3
4
5
6
<?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を定義します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?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に画面遷移を行うよう、シンプルに記述しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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;
 
 }
}
1
2
3
4
5
6
7
8
public class AcitivityanimSample2 extends Activity {
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.sub);
 }
}

About The Author

UpDown-G