【Android】画面遷移時のアニメーション設定

こんばんは。

今回は画面遷移の時にアニメーションを設定し、iPhoneライクのようにしたいと思います。
スタイルを設定すると簡単にアプリ内全ての画面遷移に適用できるので、それでやりたいと思います。

また、例えばひとつの画面遷移では左右に画面がフェードイン・アウトするアニメーションを作りたくて、もう一つの画面遷移では上下に画面がフェードイン・アウトするアニメーションを作りたい場合は、スタイルではなく、StartActivityの際に指定します。
今回はそちらのほうのやり方も載せます。

まず、端末のアニメーションを有効にします（Android4.0のやり方）。

• メニュー > 設定 > 開発者向けオプション > トランジションアニメ を1倍にする。
  • ウィンドウアニメも1倍にしとくと良いかもしれません。

アニメーションのTheme作成

ThemeとStyle の定義

res/values/styles.xml を以下のように変更します。

<!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <item name="android:windowBackground">@drawable/blackboard</item>
        <item name="android:windowAnimationStyle">@style/Animation.Activity</item>
    </style>
    
    <!-- アニメーションのスタイル -->
<!--     <style name="MyAnimTheme" parent="android:Theme"> -->
<!--         <item name="android:windowAnimationStyle">@style/Animation.Activity</item> -->
<!--     </style> -->
    
    <!-- アニメーションの詳細設定 -->
    <style name="Animation" parent="android:Animation" />
    <style name="Animation.Activity" parent="android:Animation.Activity">
        <item name="android:activityOpenEnterAnimation">@animator/slide_in_right</item>
        <item name="android:activityOpenExitAnimation">@animator/slide_out_left</item>
        <item name="android:activityCloseEnterAnimation">@animator/slide_in_left</item>
        <item name="android:activityCloseExitAnimation">@animator/slide_out_right</item>
    </style>

• activityOpenEnterAnimationは開いた画面の現れ方を指定
• activityOpenExitAnimationは現在のアクティビティの閉じ方を指定
• activityCloseEnterAnimationは元のアクティビティの現れ方を指定
• activityCloseExitAnimationは2番目のアクティビティの閉じ方を指定

各アニメーションの設定（左右の場合）

最初に、res/animator フォルダを作成します。これは、XMLレイアウトファイルを作成する際に、リソースタイプを Property Animation にして作成すると自動で作成されます。
その際のルート要素はsetにしておきましょう。

res/animator/slide_in_right

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromXDelta="100%"
        android:toXDelta="0" />
    <alpha
        android:duration="300"
        android:fromAlpha="0.0" 
        android:toAlpha="1.0" />

</set>

res/animator/slide_out_left

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromXDelta="0"
        android:toXDelta="-100%" />
    <alpha
        android:duration="300"
        android:fromAlpha="1.0" 
        android:toAlpha="0.0" />

</set>

res/animator/slide_in_left

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromXDelta="-100%"
        android:toXDelta="0" />
    <alpha
        android:duration="300"
        android:fromAlpha="0.0" 
        android:toAlpha="1.0" />

</set>

res/animator/slide_out_right

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromXDelta="0"
        android:toXDelta="100%" />
    <alpha
        android:duration="300"
        android:fromAlpha="1.0" 
        android:toAlpha="0.0" />

</set>

各アニメーションの設定（上下の場合）

上下で画面遷移をしたいときのアニメーション設定は以下のようになります。

左右のときとの違いは、XかYかだけです。
なので、fromX、toX をそれぞれ fromY, toY にかえればOKです。一応下記に示しておきます。
下記のandroid:fillAfterは、アニメーション後の状態を保つかどうかの判断です。
android:fillEnabledはfillBeforeとfillAfterの制御らしいですが、使わなくてもアニメーション自体は可能です。

res/animator/slide_in_right

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    android:interpolator="@android:anim/accelerate_interpolator">
    <translate
        android:duration="300"
        android:fromYDelta="100%"
        android:toYDelta="0%"
	android:fillAfter="true" 
        android:fillEnabled="true"/>
    <alpha
        android:duration="300"
        android:fromAlpha="0.0" 
        android:toAlpha="1.0" />

</set>

res/animator/slide_out_left

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromYDelta="0"
        android:toYDelta="-100%"
	android:fillAfter="true" 
        android:fillEnabled="true"/>
    <alpha
        android:duration="300"
        android:fromAlpha="1.0" 
        android:toAlpha="0.0" />

</set>

res/animator/slide_in_left

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromYDelta="-100%"
        android:toYDelta="0"
	android:fillAfter="true" 
        android:fillEnabled="true"/>
    <alpha
        android:duration="300"
        android:fromAlpha="0.0" 
        android:toAlpha="1.0" />

</set>

res/animator/slide_out_right

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromYDelta="0"
        android:toYDelta="100%"
	android:fillAfter="true" 
        android:fillEnabled="true"/>
    <alpha
        android:duration="300"
        android:fromAlpha="1.0" 
        android:toAlpha="0.0" />

</set>

以上でアニメーションが動きます。

また、各画面遷移毎にアニメーションを分けたい場合は、StartActivityの下に次のように記述します。

overridePendingTransition(R.animator.slide_in_right, R.animator.slide_out_left);

この関数の引数は（画面のフェードインのアニメーション, 画面のフェードアウトのアニメーション）になります。

それでは。

参考にさせていただいたサイト

fumi_042の雑記帳: Androidでアニメーションを使って画面遷移をさせる方法
throw Life - ActivityのOpenとCloseをアニメーションさせる