Android Jetpack Navigation コピペで使える画面遷移アニメーション

はじめに

アニメーションファイルを作ろうとして毎回忘れてしまうため、備忘録として残しておきます。
また、合わせてAndroid JetPack Navigationでの設定サンプルも記載しておきます。アニメーションファイル自体はAndroid JetPack Navigationでなくても使用することは可能です。

今回はNavigationの説明などはしませんので、Navigationの実装方法についてはコチラを参考にしてください。

qiita.com

アニメーション

フェードイン・フェードアウト遷移

navigation_fade_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="@integer/config_navAnimTime"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toAlpha="1.0" />
</set>

navigation_fade_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="@integer/config_navAnimTime"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0" />
</set>

navigation_fade_pop_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="@integer/config_navAnimTime"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toAlpha="1.0" />
</set>

navigation_fade_pop_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="@integer/config_navAnimTime"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0" />
</set>

スライドイン・スライドアウト（縦）遷移

Android JetPack Navigation

<fragment
    android:id="@+id/splashFragment"
    android:name="com.hoge.SplashFragment"
    tools:layout="@layout/fragment_splash">
    <action
        android:id="@+id/action_to_home"
        app:destination="@id/homeFragment"
        app:enterAnim="@anim/navigation_slide_vertical_enter"
        app:exitAnim="@anim/navigation_slide_vertical_exit"
        app:popEnterAnim="@anim/navigation_slide_vertical_pop_enter"
        app:popExitAnim="@anim/navigation_slide_vertical_pop_exit" />
</fragment>

navigation_slide_vertical_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@integer/config_navAnimTime"
        android:fromYDelta="100%p"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toYDelta="0%p" />
</set>

navigation_slide_vertical_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="@integer/config_navAnimTime"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toAlpha="0.0" />
</set>

navigation_slide_vertical_pop_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="@integer/config_navAnimTime"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toAlpha="1.0" />
</set>

navigation_slide_vertical_pop_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@integer/config_navAnimTime"
        android:fromYDelta="0%p"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toYDelta="100%p" />
</set>

スライドイン・スライドアウト（横）遷移

Android JetPack Navigation

<fragment
    android:id="@+id/splashFragment"
    android:name="com.hoge.SplashFragment"
    tools:layout="@layout/fragment_splash">
    <action
        android:id="@+id/action_to_home"
        app:destination="@id/homeFragment"
        app:enterAnim="@anim/navigation_slide_horizontal_enter"
        app:exitAnim="@anim/navigation_slide_horizontal_exit"
        app:popEnterAnim="@anim/navigation_slide_horizontal_pop_enter"
        app:popExitAnim="@anim/navigation_slide_horizontal_pop_exit" />
</fragment>

navigation_slide_horizontal_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@integer/config_navAnimTime"
        android:fromXDelta="100%p"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toXDelta="0%p" />
</set>

navigation_slide_horizontal_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="@integer/config_navAnimTime"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toAlpha="0.0" />
</set>

navigation_slide_horizontal_pop_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="@integer/config_navAnimTime"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toAlpha="1.0" />
</set>

navigation_slide_horizontal_pop_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@integer/config_navAnimTime"
        android:fromXDelta="0%p"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toXDelta="100%p" />
</set>

Navigationでの設定方法

developer.android.com

developer.android.com

Xmlで設定

Android JetPack Navigationの遷移定義ファイル

<fragment
    android:id="@+id/splashFragment"
    android:name="com.hoge.SplashFragment"
    tools:layout="@layout/fragment_splash">
    <action
        android:id="@+id/action_to_home"
        app:destination="@id/homeFragment"
        app:enterAnim="@anim/navigation_fade_enter"
        app:exitAnim="@anim/navigation_fade_exit"
        app:popEnterAnim="@anim/navigation_fade_pop_enter"
        app:popExitAnim="@anim/navigation_fade_pop_exit" />
</fragment>

コードから設定

遷移元のFragment

fadeButton.setOnClickListener {
    val option = NavOptions.Builder()
        .setEnterAnim(R.anim.navigation_fade_enter)
        .setExitAnim(R.anim.navigation_fade_exit)
        .setPopEnterAnim(R.anim.navigation_fade_pop_enter)
        .setPopExitAnim(R.anim.navigation_fade_pop_exit)
        .build()
    findNavController().navigate(R.id.homeFragment, null, option)
}