Aktivität mit einer Animation starten

Compose ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Arbeiten mit Animationen in Compose
Zwischen verschiedenen Inhaltstypen in Compose animieren →

Aktivitätsübergänge in Material Design-Apps stellen durch Animationen und Transformationen zwischen gemeinsamen Elementen visuelle Verbindungen zwischen verschiedenen Status her. Sie können benutzerdefinierte Animationen für Ein- und Ausblendübergänge sowie für Übergänge von gemeinsam genutzten Elementen zwischen Aktivitäten angeben.

Abbildung 1. Ein Übergang mit gemeinsamen Elementen.

  • Eine Enter-Übergang bestimmt, wie Ansichten in einer Aktivität eingeblendet werden. Bei der Übergangsanimation explode werden die Ansichten beispielsweise von außen in die Szene eingeflogen und bewegen sich dann zur Mitte des Bildschirms.
  • Eine Übergangsanimation für das Beenden bestimmt, wie Ansichten in einer Aktivität die Szene verlassen. Bei der explode-Übergangsanimation werden die Ansichten beispielsweise vom Zentrum weg aus der Szene entfernt.
  • Eine Übergangsanimation für gemeinsame Elemente bestimmt, wie Ansichten, die zwischen zwei Aktivitäten geteilt werden, zwischen diesen Aktivitäten übergehen. Wenn beispielsweise zwei Aktivitäten dasselbe Bild an unterschiedlichen Positionen und in unterschiedlichen Größen haben, wird das Bild durch den changeImageTransform-Übergang für gemeinsame Elemente zwischen diesen Aktivitäten verschoben und skaliert.

Android unterstützt die folgenden Ein- und Ausblendeübergänge:

  • explode: Verschiebt Ansichten in Richtung oder weg vom Mittelpunkt der Szene.
  • slide: Verschiebt Ansichten an einen der Ränder der Szene oder von einem der Ränder der Szene weg.
  • fade: Fügt eine Ansicht in die Szene ein oder entfernt sie daraus, indem die Deckkraft geändert wird.

Jeder Übergang, der die Visibility-Klasse erweitert, wird als Ein- oder Ausblendeübergang unterstützt. Weitere Informationen finden Sie in der API-Referenz für die Klasse Transition.

Android unterstützt auch diese Übergänge für gemeinsame Elemente:

  • changeBounds: Animiert die Änderungen an den Layoutgrenzen von Zielansichten.
  • changeClipBounds: Animiert die Änderungen der Clip-Grenzen von Zielansichten.
  • changeTransform: Animiert die Änderungen bei Skalierung und Drehung von Zielansichten.
  • changeImageTransform: Animiert die Änderungen an Größe und Skalierung von Zielbildern.

Wenn Sie in Ihrer App Übergänge zwischen Aktivitäten aktivieren, wird standardmäßig ein Überblendungseffekt zwischen den Aktivitäten verwendet.

Abbildung 2: Ein Szenenübergang mit einem gemeinsamen Element.

Beispielcode für die Animation zwischen Aktivitäten mit freigegebenen Elementen finden Sie unter ActivitySceneTransitionBasic.

Systemversion prüfen

APIs für Aktivitätsübergänge sind ab Android 5.0 (API 21) verfügbar. Um die Kompatibilität mit früheren Android-Versionen zu gewährleisten, sollten Sie zur Laufzeit das System version prüfen, bevor Sie die APIs für eine dieser Funktionen aufrufen:

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
}

Benutzerdefinierte Übergänge angeben

Aktivieren Sie zuerst Übergänge für Fensterinhalte mit dem Attribut android:windowActivityTransitions, wenn Sie einen Stil definieren, der vom Material-Design abgeleitet wird. Sie können auch Ein-, Aus- und Übergänge für gemeinsame Elemente in Ihrer Stildefinition angeben:

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

Die change_image_transform-Übergangsphase in diesem Beispiel ist so definiert:

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

Das changeImageTransform-Element entspricht der ChangeImageTransform-Klasse. Weitere Informationen finden Sie in der API-Referenz für Transition.

Wenn Sie stattdessen Übergänge für Fensterinhalte in Ihrem Code aktivieren möchten, rufen Sie die Funktion Window.requestFeature() auf:

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

Wenn Sie Übergänge in Ihrem Code angeben möchten, rufen Sie diese Funktionen mit einem Transition-Objekt auf:

Die Funktionen setExitTransition() und setSharedElementExitTransition() definieren den Übergang zum Beenden der aufrufenden Aktivität. Die Funktionen setEnterTransition() und setSharedElementEnterTransition() definieren den Übergang beim Aufrufen der Aktivität.

Damit eine Übergangsanimation vollständig angezeigt wird, müssen Sie Übergänge für Fensterinhalte sowohl für die aufrufende als auch für die aufgerufene Aktivität aktivieren. Andernfalls wird durch den Anruf die Übergangsanimation zum Beenden gestartet, aber dann werden die Fensterübergänge wie Skalieren oder Einblenden angezeigt.

Wenn Sie einen Übergang beim Eintreten so schnell wie möglich starten möchten, verwenden Sie die Funktion Window.setAllowEnterTransitionOverlap() für die aufgerufene Aktivität. So können Sie dramatischere Übergänge beim Einblenden erstellen.

Aktivität mit Übergängen starten

Wenn Sie Übergänge aktivieren und einen Übergang für das Beenden einer Aktivität festlegen, wird der Übergang beim Starten einer anderen Aktivität so aktiviert:

Kotlin

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

Java

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

Wenn Sie für die zweite Aktivität einen Übergang beim Eintreten festlegen, wird dieser Übergang auch beim Start der Aktivität aktiviert. Wenn Sie Übergänge beim Starten einer anderen Aktivität deaktivieren möchten, geben Sie ein null-Options-Bundle an.

Aktivität mit einem gemeinsamen Element starten

So erstellen Sie eine Animation für den Bildschirmübergang zwischen zwei Aktivitäten mit einem gemeinsamen Element:

  1. Aktivieren Sie Übergänge für Fensterinhalte in Ihrem Design.
  2. Geben Sie in Ihrem Stil einen Übergang für gemeinsame Elemente an.
  3. Definieren Sie den Übergang als XML-Ressource.
  4. Weisen Sie den freigegebenen Elementen in beiden Layouts mit dem Attribut android:transitionName einen gemeinsamen Namen zu.
  5. Verwenden Sie die Funktion 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());
    }
});

Verwenden Sie für freigegebene dynamische Ansichten, die Sie in Ihrem Code generieren, die Funktion View.setTransitionName(), um in beiden Aktivitäten einen gemeinsamen Elementnamen anzugeben.

Wenn Sie die Animation für den Szenenübergang rückgängig machen möchten, wenn Sie die zweite Aktivität beenden, rufen Sie die Funktion Activity.finishAfterTransition() anstelle von Activity.finish() auf.

Aktivität mit mehreren geteilten Elementen starten

Wenn Sie eine Übergangsanimation zwischen zwei Aktivitäten mit mehr als einem gemeinsamen Element erstellen möchten, definieren Sie die gemeinsamen Elemente in beiden Layouts mit dem Attribut android:transitionName oder verwenden Sie die Funktion View.setTransitionName() in beiden Aktivitäten und erstellen Sie ein ActivityOptions-Objekt wie folgt:

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