Einführung in Animationen

Compose ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zur Verwendung 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. Animations verleihen Ihrer App außerdem einen professionellen Look, der sie hochwertiger erscheinen lässt.

Android bietet je nach gewünschter Art der Animation verschiedene Animation-APIs. Diese Dokumentation bietet 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 sorgt für eine weniger abrupte Änderung der Benutzeroberfläche.

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.

Wenn Sie Ansichten im aktuellen Layout verschieben, einblenden oder ausblenden möchten, können Sie das Property-Animationssystem des Pakets android.animation 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 Positionierungseigenschaften ändern, bewegt sich die Ansicht über den Bildschirm. Wenn Sie das Alphaattribut ändern, wird die Ansicht eingeblendet oder ausgeblendet.

Die einfachste Möglichkeit, diese Animationen zu erstellen, besteht darin, Animationen für Ihr Layout zu 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: Animation, die mit physikbasierten APIs erstellt wurde.

Wenden Sie nach Möglichkeit die Gesetze der realen Welt auf Ihre Animationen an, 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-Supportbibliothek physikbasierte Animations-APIs, die die Abläufe Ihrer Animationen anhand der Gesetze der Physik 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 in der Animation und einer unzusammenhängenden Bewegung danach, wie in Abbildung 3 dargestellt.

Animationen, die mit physikbasierten Animations-APIs wie DynamicAnimation erstellt wurden, werden durch Kraft gesteuert. 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 können Sie das Übergangs-Framework verwenden, um Animationen zu erstellen, wenn Sie das Layout innerhalb der aktuellen Aktivität oder des aktuellen Fragments ändern. 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 ein Transition, um dem System mitzuteilen, welche Art von Animation Sie wünschen, und rufen dann TransitionManager.go() auf. Das System führt dann die Animation aus, um die Layouts zu wechseln.

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 können Sie auch Animationen erstellen, die den Übergang zwischen Ihren Aktivitäten darstellen. 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 Aufhellen 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 Optionspaket kann auch festlegen, welche Ansichten zwischen den Aktivitäten geteilt werden, damit das Übergangs-Framework sie während der Animation verbinden kann.

Weitere Ressourcen: