アニメーションを使ってアクティビティを開始する

マテリアル デザイン アプリのアクティビティ遷移は、 異なる状態の変化を表現できます。 Enter 遷移と exit 遷移、および アクティビティ間の共有要素の遷移。

図 1. 説明しました。

  • 開始遷移は、アクティビティのビューをどのように表示するかを決定します その場に入りますたとえば、explode で遷移を開始すると、 ビューは外側からシーンに入り込み、 表示されます。
  • 終了遷移は、アクティビティ内でのビューの終了方法を決定する できます。たとえば explode 終了遷移では、ビューは シーンの中心から離れます
  • 共有要素遷移は、 2 つのアクティビティ間で共有される、これらのアクティビティ間の移行です。たとえば 2 つのアクティビティが同じ画像の位置とサイズが異なる場合、 changeImageTransform 共有要素遷移の変換と これらのアクティビティの間で画像がスムーズに拡大縮小されます。

Android では、次の開始遷移と終了遷移がサポートされます。

  • explode: ビューをシーンの中心に、またはシーンの中心から外に移動します。
  • slide: ビューをいずれかの端から内外に移動します。 できます。
  • fade: シーンを変更して、シーンのビューを追加または削除します。 不透明度を調整します。

Visibility クラスを拡張する遷移は、開始遷移または終了遷移としてサポートされます。 詳しくは、API リファレンスの Transition クラスです。

Android では、次の共有要素による遷移もサポートされています。

  • changeBounds: ターゲットのレイアウト境界の変更をアニメーション化します。 できます。
  • changeClipBounds: ターゲットのクリップ境界での変化をアニメーション化します。 できます。
  • changeTransform: 以下のスケールと回転の変化をアニメーション化します。 できます。
  • changeImageTransform: サイズとスケールの変化をアニメーション化します。 作成します。

アプリでアクティビティ遷移を有効にすると、デフォルトのクロスフェード 開始アクティビティと終了アクティビティの間でアクティブになります。

図 2. 1 つの共有要素を持つシーン遷移。

共有要素を使用してアクティビティ間でアニメーション化するサンプルコードについては、以下をご覧ください。 ActivitySceneTransitionBasic。

システム バージョンを確認する

アクティビティ遷移 API は、Android 5.0（API 21）以降でご利用いただけます。以前のバージョンの Android との互換性を維持するには、 システム version を実行時に 次の機能の API を呼び出します。

Kotlin

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Java

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

カスタム遷移を指定する

まず、android:windowActivityTransitions でウィンドウ コンテンツ遷移を有効にします。 属性を使用して、マテリアル テーマから継承したスタイルを定義することをおすすめします。また、 Enter、Exit、共有要素遷移をスタイル定義に追加する:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

この例の change_image_transform 遷移に関する定義は、次のとおりです。

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

changeImageTransform 要素は ChangeImageTransform クラス。詳細については、このモジュールの Transition のリファレンス。

代わりにコードでウィンドウ コンテンツ遷移を有効にするには、 Window.requestFeature() 関数:

Kotlin

// Inside your activity (if you did not enable transitions in your theme)
with(window) {
    requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

    // Set an exit transition
    exitTransition = Explode()
}

Java

// Inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

// Set an exit transition
getWindow().setExitTransition(new Explode());

コードで遷移を指定するには、 Transition オブジェクト:

setExitTransition() と setSharedElementExitTransition() 関数で exit を定義する 呼び出されることがあります。setEnterTransition() と setSharedElementEnterTransition() 関数は、テキスト入力の 呼び出されることがあります。

切り替え効果を最大限に活用するには、ウィンドウ コンテンツを有効にする必要があります 呼び出されると効果的です。それ以外の場合、 アクティビティによって終了遷移が開始しますが、 調整できます。

開始遷移をできるだけ早く開始するには、 Window.setAllowEnterTransitionOverlap() 呼び出すことができます。これにより、さらに印象的な開始遷移になります。

遷移を使ってアクティビティを開始する

遷移を有効にしてアクティビティの終了遷移を設定すると、 遷移は、次のように別のアクティビティを起動するとアクティブになります。

Kotlin

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

Java

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

2 つ目のアクティビティに開始遷移を設定すると、その遷移も アクティビティが開始されると有効になります。開始時に遷移を無効にするには null オプション バンドルを指定します。

共有要素を使ってアクティビティを開始する

スペースを持つ 2 つのアクティビティ間で画面遷移アニメーションを作成するには、 作成するには、次の操作を行います。

  1. テーマでウィンドウ コンテンツ遷移を有効にします。
  2. スタイルで共有要素遷移を指定します。
  3. 遷移を XML リソースとして定義します。
  4. 両方のレイアウトの共有要素に共通名を android:transitionName 属性。
  5. ActivityOptions.makeSceneTransitionAnimation() 関数を使用する

Kotlin

// Get the element that receives the click event
val imgContainerView = findViewById<View>(R.id.img_container)

// Get the common element for the transition in this activity
val androidRobotView = findViewById<View>(R.id.image_small)

// Define a click listener
imgContainerView.setOnClickListener( {
    val intent = Intent(this, Activity2::class.java)
    // Create the transition animation - the images in the layouts
    // of both activities are defined with android:transitionName="robot"
    val options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot")
    // Start the new activity
    startActivity(intent, options.toBundle())
})

Java

// Get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// Get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// Define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // Create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // Start the new activity
        startActivity(intent, options.toBundle());
    }
});

コードで生成する共有動的ビューの場合は、 View.setTransitionName() 関数を使用して、両方のファイルに共通の要素名を指定します。 できます。

2 番目のアクティビティが終了したときにシーン遷移アニメーションを逆にするには、 Activity.finishAfterTransition() 関数を使用します。Activity.finish()

複数の共有要素を使ってアクティビティを開始する

より多くのアクティビティがある 2 つのアクティビティ間でシーン遷移アニメーションを作成するには、 両方のレイアウトで共有要素を定義するには、 android:transitionName 属性を使用するか、 両方のアクティビティで View.setTransitionName() が機能し、 作成 ActivityOptions オブジェクトを次のように変更します。

Kotlin

// Rename the Pair class from the Android framework to avoid a name clash
import android.util.Pair as UtilPair
...
val options = ActivityOptions.makeSceneTransitionAnimation(this,
        UtilPair.create(view1, "agreedName1"),
        UtilPair.create(view2, "agreedName2"))

Java

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));