Rozpoczynanie aktywności przy użyciu animacji

Wypróbuj metodę Compose

Jetpack Compose to zalecany zestaw narzędzi interfejsu na Androida. Dowiedz się, jak pracować z animacjami w Compose.

Animowanie przejść między różnymi typami treści w Compose →

Przejścia między aktywnościami w aplikacjach Material Design zapewniają wizualne połączenia między różnymi stanami za pomocą ruchu i przekształceń wspólnych elementów. Możesz określić niestandardowe animacje przejść wejścia i wyjścia oraz przejść elementów wspólnych między aktywnościami.

Rysunek 1. Przejście z elementami współdzielonymi.

• Przejście enter określa sposób, w jaki widoki w aktywności pojawiają się na scenie. Na przykład w przypadku explode przejścia wejścia widoki wchodzą do sceny z zewnątrz i przelatują do środka ekranu.
• Przejście wyjścia określa sposób, w jaki widoki w aktywności opuszczają scenę. Na przykład w explodeprzejściu wyjścia widoki oddalają się od środka sceny.
• Przejście elementów wspólnych określa, jak widoki, które są wspólne dla 2 aktywności, przechodzą między tymi aktywnościami. Jeśli na przykład 2 aktywności mają ten sam obraz w różnych pozycjach i rozmiarach, przejście elementu wspólnego changeImageTransform płynnie przenosi i skaluje obraz między tymi aktywnościami.

Android obsługuje te przejścia wejścia i wyjścia:

• explode: przesuwa widoki do środka sceny lub od niego.
• slide: przesuwa widoki do lub z jednej z krawędzi sceny.
• fade: dodaje lub usuwa widok ze sceny, zmieniając jego przezroczystość.

Każde przejście, które rozszerza klasę Visibility, jest obsługiwane jako przejście wejścia lub wyjścia. Więcej informacji znajdziesz w dokumentacji API klasy Transition.

Android obsługuje też te przejścia elementów wspólnych:

• changeBounds: animuje zmiany w granicach układu docelowych widoków.
• changeClipBounds: animuje zmiany granic klipu w przypadku docelowych widoków.
• changeTransform: animuje zmiany skali i obrotu widoków docelowych.
• changeImageTransform: animuje zmiany rozmiaru i skali obrazów docelowych.

Gdy włączysz w aplikacji przejścia między aktywnościami, domyślne przejście z przenikaniem aktywuje się między wchodzącą i wychodzącą aktywnością.

Rysunek 2. Przejście między scenami z jednym elementem współdzielonym.

Przykładowy kod, który animuje przejścia między aktywnościami za pomocą udostępnionych elementów, znajdziesz w artykule ActivitySceneTransitionBasic.

Sprawdzanie wersji systemu

Interfejsy API przejść aktywności są dostępne na Androidzie 5.0 (API 21) i nowszym. Aby zachować zgodność ze starszymi wersjami Androida, przed wywołaniem interfejsów API dla dowolnej z tych funkcji sprawdź w czasie działania systemu version:

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
}

Określanie przejść niestandardowych

Najpierw włącz przejścia treści okna za pomocą atrybutu android:windowActivityTransitions podczas definiowania stylu dziedziczonego z motywu Material. W definicji stylu możesz też określić przejścia podczas wchodzenia, wychodzenia i wspólnych elementów:

<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>

Przejście change_image_transform w tym przykładzie jest zdefiniowane w ten sposób:

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

Element changeImageTransform odpowiada klasie ChangeImageTransform. Więcej informacji znajdziesz w dokumentacji API Transition.

Aby włączyć przejścia treści okna w kodzie, wywołaj funkcję: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());

Aby określić przejścia w kodzie, wywołaj te funkcje z obiektem Transition:

• Window.setEnterTransition()
• Window.setExitTransition()
• Window.setSharedElementEnterTransition()
• Window.setSharedElementExitTransition()

Funkcje setExitTransition() i setSharedElementExitTransition() określają przejście wyjścia dla wywołującej aktywności. Funkcje setEnterTransition() i setSharedElementEnterTransition() określają przejście wejścia dla wywoływanego działania.

Aby uzyskać pełny efekt przejścia, musisz włączyć przejścia zawartości okna zarówno w aktywności wywołującej, jak i wywoływanej. W przeciwnym razie aktywność połączenia rozpocznie przejście wyjścia, ale potem zobaczysz przejścia okna, takie jak skalowanie lub zanikanie.

Aby jak najszybciej rozpocząć przejście wejścia, użyj funkcji Window.setAllowEnterTransitionOverlap() w wywoływanej aktywności. Dzięki temu przejścia przy wchodzeniu mogą być bardziej efektowne.

Rozpoczynanie aktywności przy użyciu przejść

Jeśli włączysz przejścia i ustawisz przejście wyjścia dla aktywności, przejście zostanie aktywowane po uruchomieniu innej aktywności w ten sposób:

Kotlin

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

Java

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

Jeśli ustawisz przejście wejścia dla drugiej aktywności, to przejście również aktywuje się po rozpoczęciu aktywności. Aby wyłączyć przejścia podczas rozpoczynania kolejnej aktywności, podaj pakiet opcji null.

Rozpoczynanie aktywności przy użyciu udostępnionego elementu

Uwaga: informacje o przechodzeniu między komponentami z spójną treścią znajdziesz w artykule Przejścia między komponentami w Compose.

Aby utworzyć animację przejścia między 2 aktywnościami, które mają wspólny element:

1. Włącz przejścia treści okna w motywie.
2. Określ przejście elementów współdzielonych w stylu.
3. Zdefiniuj przejście jako zasób XML.
4. Przypisz wspólną nazwę do udostępnionych elementów w obu układach za pomocą atrybutu android:transitionName.
5. Użyj funkcji 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());
    }
});

W przypadku udostępnionych widoków dynamicznych generowanych w kodzie użyj funkcji View.setTransitionName(), aby określić wspólną nazwę elementu w obu działaniach.

Aby odwrócić animację przejścia między scenami po zakończeniu drugiej aktywności, wywołaj funkcję Activity.finishAfterTransition() zamiast funkcji Activity.finish().

Uruchamianie aktywności z wieloma udostępnionymi elementami

Aby utworzyć animację przejścia między scenami w przypadku 2 aktywności, które mają więcej niż 1 element udostępniony, zdefiniuj elementy udostępnione w obu układach za pomocą atrybutu android:transitionName lub użyj funkcji View.setTransitionName() w obu aktywnościach i utwórz obiekt ActivityOptions w ten sposób:

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"));