Aktivität mit einer Animation starten

Compose ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Arbeiten mit Animationen im Tool zum Erstellen von E-Mails

Aktivitätsübergänge in Material Design-Apps schaffen visuelle Verbindungen zwischen verschiedenen Status durch Bewegung und Transformationen zwischen gemeinsamen Elementen. Sie können benutzerdefinierte Animationen für Einstiegs- und Ausstiegsübergänge sowie für Übergänge gemeinsamer Elemente zwischen Aktivitäten angeben.

Abbildung 1 Ein Übergang mit gemeinsamen Elementen.

  • Mit einem Einblendungsübergang wird festgelegt, wie Ansichten in einer Aktivität in die Szene einblendet werden. Beim explode-Einblendungsübergang beispielsweise werden die Ansichten von außen in die Szene eingeblendet und fliegen nach innen zur Mitte des Bildschirms.
  • Mit einem Übergang wird festgelegt, wie die Ansichten in einer Aktivität die Szene verlassen. Beim explode-Übergang verlassen die Ansichten die Szene beispielsweise nicht in Richtung Mitte.
  • Mit einem Übergang mit gemeinsamen Elementen wird festgelegt, wie Ansichten, die zwischen zwei Aktivitäten gemeinsam genutzt werden, zwischen diesen Aktivitäten wechseln. Wenn beispielsweise zwei Aktivitäten dasselbe Bild an unterschiedlichen Positionen und Größen haben, wird das Bild beim Übergang mit dem gemeinsamen Element changeImageTransform zwischen diesen Aktivitäten reibungslos verschoben und skaliert.

Android unterstützt die folgenden Übergänge für den Einstieg und Ausstieg:

  • explode: bewegt die Ansichten in Richtung der Mitte der Szene oder von ihr weg.
  • slide: Zoomt die Ansicht an einem der Ränder der Szene heran oder heraus.
  • fade: Hiermit wird eine Ansicht durch Ändern der Deckkraft zur Szene hinzugefügt oder daraus entfernt.

Alle Übergänge, die die Klasse Visibility erweitern, werden als Eintritts- oder Ausstiegsübergang unterstützt. Weitere Informationen finden Sie in der API-Referenz für die Klasse Transition.

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

  • changeBounds: Die Änderungen an den Layoutgrenzen der Zielansichten werden animiert.
  • changeClipBounds: Die Änderungen an den Clip-Rändern der Zielansichten werden animiert.
  • changeTransform: Hiermit werden die Änderungen an Skalierung und Drehung der Zielansichten animiert.
  • changeImageTransform: Hier werden die Änderungen der Größe und des Maßstabs der Zielbilder animiert.

Wenn Sie Aktivitätsübergänge in Ihrer App aktivieren, wird der Standardübergang mit Überblendung zwischen dem Betreten und Verlassen von Aktivitäten aktiviert.

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

Beispielcode für die Animationsübergänge 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. Prüfen Sie zur Wahrung der Kompatibilität mit früheren Android-Versionen das System version zur Laufzeit, 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 die Übergänge für Fensterinhalte mit dem Attribut android:windowActivityTransitions, wenn Sie einen Stil definieren, der vom Material-Design-Thema abgeleitet ist. In der Stildefinition können Sie auch Übergänge für das Ein- und Ausblenden sowie für gemeinsame Elemente 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-Übergang 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 Element changeImageTransform entspricht der Klasse ChangeImageTransform. Weitere Informationen finden Sie in der API-Referenz für Transition.

Wenn Sie stattdessen Fensterinhaltsübergänge 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 Ausstiegsübergang für die aufrufende Aktivität. Die Funktionen setEnterTransition() und setSharedElementEnterTransition() definieren den Eintrittsübergang für die aufgerufene Aktivität.

Damit ein Übergang seine volle Wirkung entfalten kann, müssen Sie die Übergänge für Fensterinhalte sowohl für die aufrufende als auch für die aufgerufene Aktivität aktivieren. Andernfalls startet die Aufrufaktivität den Ausstiegsübergang, aber dann werden die Fensterübergänge wie Skalieren oder Ausblenden angezeigt.

Wenn Sie einen Einstiegsübergang 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 erzielen.

Aktivitäten mit Übergängen starten

Wenn Sie Übergänge aktivieren und einen Ausstiegsübergang für eine Aktivität festlegen, wird der Übergang aktiviert, wenn Sie eine andere Aktivität starten. Gehen Sie dazu so vor:

Kotlin

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

Java

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

Wenn Sie für die zweite Aktivität einen Eintrittsübergang festlegen, wird dieser Übergang auch beim Starten der Aktivität aktiviert. Wenn Sie Übergänge deaktivieren möchten, wenn Sie eine andere Aktivität starten, geben Sie ein null-Optionspaket an.

Aktivitäten mit einem freigegebenen Element starten

So erstellen Sie eine Bildschirmübergangsanimation zwischen zwei Aktivitäten mit einem gemeinsamen Element:

  1. Aktivieren Sie in Ihrem Design die Übergänge für Fensterinhalte.
  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 gemeinsamen 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 Szenenübergangsanimation rückwärts abspielen möchten, wenn Sie die zweite Aktivität abgeschlossen haben, rufen Sie die Funktion Activity.finishAfterTransition() anstelle von Activity.finish() auf.

Aktivität mit mehreren freigegebenen Elementen starten

Wenn Sie eine Szenenübergangsanimation zwischen zwei Aktivitäten erstellen möchten, die mehr als ein gemeinsames Element haben, definieren Sie die gemeinsamen Elemente in beiden Layouts mit dem Attribut android:transitionName oder verwenden Sie die Funktion View.setTransitionName() in beiden Aktivitäten. Erstellen Sie dann ein ActivityOptions-Objekt folgendermaßen:

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