Einführung in Animationen

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

Mithilfe von Animationen können Sie visuelle Hinweise hinzufügen, die Nutzer über das Geschehen in Ihrer App informieren. Sie sind besonders nützlich, wenn sich der Status der Benutzeroberfläche ändert, z. B. wenn neue Inhalte geladen oder neue Aktionen verfügbar werden. Animationen verleihen Ihrer App außerdem einen eleganten Look, was ihr ein hochwertigeres Erscheinungsbild verleiht.

Android bietet je nach gewünschter Art der Animation verschiedene Animation-APIs. In dieser Dokumentation finden Sie einen Überblick über die verschiedenen Möglichkeiten, wie Sie Ihrer Benutzeroberfläche Bewegung hinzufügen können.

Weitere Informationen dazu, wann Sie Animationen verwenden sollten, finden Sie im Material Design-Leitfaden zu Bewegung.

Bitmaps animieren

Abbildung 1. Ein animiertes Drawable.

Verwenden Sie die drawable animation APIs, um eine Bitmapgrafik wie ein Symbol oder eine Illustration zu animieren. Normalerweise werden diese Animationen statisch mit einer drawable-Ressource definiert. Sie können das Animationsverhalten aber auch zur Laufzeit definieren.

Eine gute Möglichkeit, Nutzern zu vermitteln, dass zwei Aktionen zusammenhängen, ist beispielsweise die Animation einer Wiedergabeschaltfläche, die sich bei Berührung in eine Pausenschaltfläche verwandelt.

Weitere Informationen finden Sie unter Zeichnbare Grafiken animieren.

Sichtbarkeit und Bewegung der Benutzeroberfläche animieren

Abbildung 2. Eine dezente Animation beim Ein- und Ausblenden eines Dialogfelds macht die Benutzeroberflächenänderung weniger abrupt.

Wenn Sie die Sichtbarkeit oder Position von Ansichten in Ihrem Layout ändern müssen, sollten Sie dezente Animationen verwenden, damit Nutzer verstehen, wie sich die Benutzeroberfläche ändert.

Zum Verschieben, Einblenden oder Ausblenden von Ansichten im aktuellen Layout können Sie das im Paket android.animation bereitgestellte Eigenschaftsanimationssystem verwenden, das ab Android 3.0 (API-Level 11) verfügbar ist. Mit diesen APIs werden die Eigenschaften Ihrer View-Objekte über einen bestimmten Zeitraum aktualisiert und die Ansicht wird bei Änderungen der Eigenschaften kontinuierlich neu gezeichnet. Wenn Sie beispielsweise die Positionseigenschaften ändern, wird die Ansicht über den Bildschirm verschoben. Wenn Sie die Alpha-Eigenschaft ändern, wird die Ansicht ein- oder ausgeblendet.

Am einfachsten lassen sich Animationen erstellen, wenn Sie Animationen für Ihr Layout aktivieren. Wenn Sie dann die Sichtbarkeit einer Ansicht ändern, wird automatisch eine Animation angewendet. Weitere Informationen finden Sie unter Layoutänderungen automatisch animieren.

Informationen zum Erstellen von Animationen mit dem Attributanimationssystem finden Sie unter Attributanimation – Übersicht. Auf den folgenden Seiten finden Sie Informationen zum Erstellen gängiger Animationen:

Physikbasierte Bewegung

Abbildung 3: Animation, die mit ObjectAnimator erstellt wurde.

Abbildung 4 Mit physikbasierten APIs erstellte Animationen

Wenn es möglich ist, sollten Sie Ihre Animationen mit realistischen physikalischen Elementen versehen, damit sie natürlich aussehen. So sollten sie beispielsweise den Schwung beibehalten, wenn sich ihr Ziel ändert, und bei allen Änderungen reibungslose Übergänge vornehmen.

Um diese Verhaltensweisen zu ermöglichen, enthält die Android Support Library physikbasierte Animations-APIs, die auf den Gesetzen der Physik beruhen, um das Ablauf Ihrer Animationen zu steuern.

Zwei gängige physikbasierte Animationen sind:

Nicht physikbasierte Animationen, z. B. solche, die mit ObjectAnimator APIs erstellt wurden, sind ziemlich statisch und haben eine feste Dauer. Wenn sich der Zielwert ändert, müssen Sie die Animation zum Zeitpunkt der Änderung abbrechen, die Animation mit einem neuen Wert als Startwert neu konfigurieren und den neuen Zielwert hinzufügen. Visuell führt dieser Vorgang zu einem abrupten Stopp der Animation und einer unzusammenhängenden Bewegung danach, wie in Abbildung 3 dargestellt.

Animationen, die mit physikbasierten Animations-APIs wie DynamicAnimation erstellt werden, werden durch Kraft angetrieben. Die Änderung des Zielwerts führt zu einer Änderung der Kraft. Die neue Kraft wird auf die vorhandene Geschwindigkeit angewendet, was einen kontinuierlichen Übergang zum neuen Ziel ermöglicht. Dieser Prozess führt zu einer natürlicher aussehenden Animation, wie in Abbildung 4 dargestellt.

Layoutänderungen animieren

Abbildung 5. Eine Animation, um weitere Details anzuzeigen, kann durch Ändern des Layouts oder Starten einer neuen Aktivität erreicht werden.

Unter Android 4.4 (API-Level 19) und höher kannst du mit dem Transition-Framework Animationen erstellen, wenn du das Layout innerhalb der aktuellen Aktivität oder des aktuellen Fragments austauschst. Sie müssen lediglich das Start- und Endlayout sowie die Art der Animation angeben. Das System ermittelt dann eine Animation zwischen den beiden Layouts und führt sie aus. So können Sie die gesamte Benutzeroberfläche austauschen oder nur einige Ansichten verschieben oder ersetzen.

Wenn der Nutzer beispielsweise auf ein Element tippt, um weitere Informationen zu sehen, können Sie das Layout durch die Artikeldetails ersetzen und einen Übergang wie in Abbildung 5 anwenden.

Das Start- und Endlayout werden jeweils in einer Scene gespeichert. Die Startszene wird jedoch normalerweise automatisch aus dem aktuellen Layout ermittelt. Sie erstellen einen Transition, um dem System mitzuteilen, welche Art von Animation Sie wünschen. Dann rufen Sie TransitionManager.go() auf und das System führt die Animation aus, um die Layouts auszutauschen.

Weitere Informationen finden Sie unter Layoutänderungen mit einem Übergang animieren. Beispielcode finden Sie unter BasicTransition.

Zwischen Aktivitäten animieren

Unter Android 5.0 (API-Level 21) und höher kannst du auch Animationen erstellen, die zwischen deinen Aktivitäten wechseln. Dieser Ansatz basiert auf dem im vorherigen Abschnitt beschriebenen Übergangs-Framework, ermöglicht aber die Erstellung von Animationen zwischen Layouts in separaten Aktivitäten.

Sie können einfache Animationen wie das seitliche Einblenden oder das Einblenden per Aufhellung verwenden. Sie können aber auch Animationen erstellen, die zwischen den geteilten Ansichten in den einzelnen Aktivitäten wechseln. Wenn der Nutzer beispielsweise auf ein Element tippt, um weitere Informationen zu sehen, können Sie mit einer Animation zu einer neuen Aktivität übergehen, bei der dieses Element nahtlos vergrößert wird, bis es den Bildschirm füllt, wie in Abbildung 5 dargestellt.

Wie gewohnt rufen Sie startActivity() auf, übergeben ihm aber eine Reihe von Optionen, die von ActivityOptions.makeSceneTransitionAnimation() bereitgestellt werden. Dieses Paket von Optionen kann beinhalten, welche Ansichten von den Aktivitäten gemeinsam genutzt werden, damit das Übergangs-Framework sie während der Animation verbinden kann.

Weitere Ressourcen: