Benutzerdefinierte Übergangsanimation erstellen

Jetpack Compose ausprobieren

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Hinzufügen von Animationen in Compose

Mehrere Attribute mit einem Übergang in Compose hinzufügen →

Mit einem benutzerdefinierten Übergang können Sie eine Animation erstellen, die in keiner der integrierten Übergangsklassen verfügbar ist. Sie können beispielsweise einen benutzerdefinierten Übergang definieren, der die Vordergrundfarbe von Text- und Eingabefeldern in Grau ändert, um anzugeben, dass die Felder auf dem neuen Bildschirm deaktiviert sind. Diese Art von Änderung hilft Nutzern, die deaktivierten Felder zu sehen.

Bei einem benutzerdefinierten Übergang werden wie bei einem der integrierten Übergangstypen Animationen auf untergeordnete Ansichten der Start- und Endszene angewendet. Im Gegensatz zu integrierten Übergangstypen müssen Sie jedoch den Code bereitstellen, der Attributwerte erfasst und Animationen generiert. Sie können auch eine Teilmenge von Zielansichten für Ihre Animation definieren.

Auf dieser Seite erfahren Sie, wie Sie Attributwerte erfassen und Animationen generieren, um benutzerdefinierte Übergänge zu erstellen.

Klasse „Transition“ erweitern

Wenn Sie einen benutzerdefinierten Übergang erstellen möchten, fügen Sie Ihrem Projekt eine Klasse hinzu, die die Klasse Transition erweitert, und überschreiben Sie die Funktionen, die im folgenden Snippet gezeigt werden:

class CustomTransition : Transition() {

    override fun captureStartValues(transitionValues: TransitionValues) {}

    override fun captureEndValues(transitionValues: TransitionValues) {}

    override fun createAnimator(
        sceneRoot: ViewGroup,
        startValues: TransitionValues?,
        endValues: TransitionValues?
    ): Animator? {}

}

public class CustomTransition extends Transition {

    @Override
    public void captureStartValues(TransitionValues values) {}

    @Override
    public void captureEndValues(TransitionValues values) {}

    @Override
    public Animator createAnimator(ViewGroup sceneRoot,
                                   TransitionValues startValues,
                                   TransitionValues endValues) {}
}

In den folgenden Abschnitten wird erläutert, wie Sie diese Funktionen überschreiben.

Werte von Ansichtsattributen erfassen

Für Übergangsanimationen wird das System für Attributanimationen verwendet, das unter Attributanimation – Übersicht beschrieben wird. Bei Attributanimationen wird ein Ansichtsattribut über einen bestimmten Zeitraum von einem Startwert zu einem Endwert geändert. Daher benötigt das Framework sowohl den Start- als auch den Endwert des Attributs, um die Animation zu erstellen.

Für eine Attributanimation ist jedoch in der Regel nur eine kleine Teilmenge aller Attributwerte der Ansicht erforderlich. Für eine Farbanimation sind beispielsweise Farbattributwerte erforderlich, für eine Bewegungsanimation Positionsattributwerte. Da die für eine Animation erforderlichen Attributwerte für einen Übergang spezifisch sind, stellt das Übergangs-Framework nicht jeden Attributwert für einen Übergang bereit. Stattdessen ruft das Framework Callback-Funktionen auf, mit denen ein Übergang nur die benötigten Attributwerte erfassen und im Framework speichern kann.

Startwerte erfassen

Implementieren Sie die Funktion captureStartValues(transitionValues), um die Startwerte der Ansicht an das Framework zu übergeben. Das Framework ruft diese Funktion für jede Ansicht in der Startszene auf. Das Funktionsargument ist ein TransitionValues-Objekt, das einen Verweis auf die Ansicht und eine Map-Instanz enthält, in der Sie die gewünschten Ansichtswerte speichern können. Rufen Sie in Ihrer Implementierung diese Attributwerte ab und übergeben Sie sie an das Framework zurück, indem Sie sie in der Map speichern.

Damit der Schlüssel für einen Attributwert nicht mit anderen TransitionValues-Schlüsseln in Konflikt gerät, verwenden Sie das folgende Benennungsschema:

package_name:transition_name:property_name

Das folgende Snippet zeigt eine Implementierung der Funktion captureStartValues():

class CustomTransition : Transition() {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private val PROPNAME_BACKGROUND = "com.example.android.customtransition:CustomTransition:background"

    override fun captureStartValues(transitionValues: TransitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues)
    }

    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private fun captureValues(transitionValues: TransitionValues) {
        // Get a reference to the view
        val view = transitionValues.view
        // Store its background property in the values map
        transitionValues.values[PROPNAME_BACKGROUND] = view.background
    }

    ...

}

public class CustomTransition extends Transition {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private static final String PROPNAME_BACKGROUND =
            "com.example.android.customtransition:CustomTransition:background";

    @Override
    public void captureStartValues(TransitionValues transitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues);
    }


    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private void captureValues(TransitionValues transitionValues) {
        // Get a reference to the view
        View view = transitionValues.view;
        // Store its background property in the values map
        transitionValues.values.put(PROPNAME_BACKGROUND, view.getBackground());
    }
    ...
}

Endwerte erfassen

Das Framework ruft die Funktion captureEndValues(TransitionValues) einmal für jede Zielansicht in der Endszene auf. In allen anderen Aspekten funktioniert captureEndValues() genauso wie captureStartValues().

Das folgende Code-Snippet zeigt eine Implementierung der Funktion captureEndValues():

override fun captureEndValues(transitionValues: TransitionValues) {
    captureValues(transitionValues)
}

@Override
public void captureEndValues(TransitionValues transitionValues) {
    captureValues(transitionValues);
}

In diesem Beispiel rufen sowohl die Funktionen captureStartValues() als auch captureEndValues() die Funktion captureValues() auf, um Werte abzurufen und zu speichern. Das von captureValues() abgerufene Ansichtsattribut ist dasselbe, hat aber in der Start- und Endszene unterschiedliche Werte. Das Framework verwaltet separate Maps für den Start- und Endzustand einer Ansicht.

Benutzerdefinierten Animator erstellen

Wenn Sie die Änderungen an einer Ansicht zwischen ihrem Zustand in der Startszene und ihrem Zustand in der Endszene animieren möchten, stellen Sie einen Animator bereit, indem Sie die Funktion createAnimator() überschreiben. Wenn das Framework diese Funktion aufruft, übergibt es die Szenenansicht und die TransitionValues-Objekte, die die erfassten Start- und Endwerte enthalten.

Wie oft das Framework die Funktion createAnimator() aufruft, hängt von den Änderungen ab, die zwischen der Start- und der Endszene auftreten.

Betrachten Sie beispielsweise eine Animation zum Ein- oder Ausblenden, die als benutzerdefinierter Übergang implementiert wurde. Wenn die Startszene fünf Ziele hat, von denen zwei aus der Endszene entfernt werden, und die Endszene die drei Ziele aus der Startszene sowie ein neues Ziel enthält, ruft das Framework createAnimator() sechsmal auf. Bei drei der Aufrufe wird das Ein- und Ausblenden der Ziele animiert, die in beiden Szenenobjekten bleiben. Bei zwei weiteren Aufrufen wird das Ausblenden der Ziele animiert, die aus der Endszene entfernt wurden. Bei einem Aufruf wird das Einblenden des neuen Ziels in der Endszene animiert.

Für Zielansichten, die sowohl in der Start- als auch in der Endszene vorhanden sind, stellt das Framework ein TransitionValues-Objekt für die Argumente startValues und endValues bereit. Für Zielansichten, die nur in der Start- oder Endszene vorhanden sind, stellt das Framework ein TransitionValues-Objekt für das entsprechende Argument und null für das andere bereit.

Wenn Sie die createAnimator(ViewGroup, TransitionValues, TransitionValues) Funktion implementieren, um einen benutzerdefinierten Übergang zu erstellen, verwenden Sie die erfassten Werte für Ansichtsattribute, um ein Animator Objekt zu erstellen und an das Framework zurückzugeben. Ein Beispiel für eine Implementierung finden Sie in der Klasse ChangeColor im Beispiel CustomTransition. Weitere Informationen zu Attributanimatoren finden Sie unter Attributanimation.

Benutzerdefinierten Übergang anwenden

Benutzerdefinierte Übergänge funktionieren genauso wie integrierte Übergänge. Sie können einen benutzerdefinierten Übergang mit einem Übergangsmanager anwenden, wie unter Übergang anwenden beschrieben.