Animation in Compose
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Hier erfahren Sie, wie Sie mithilfe der Compose-Animations-APIs Statuswerte animieren, Übergänge verwenden, Sichtbarkeits- oder Größenänderungen animieren und Überblendungen erstellen.
Wichtige Fakten
- Die
animate*AsState API eignet sich zum Animieren eines einzelnen Werts basierend auf einem Statuswechsel.
- Wenn Sie mehrere Werte gleichzeitig animieren möchten, erstellen Sie einen Übergang mit der Funktion
updateTransition.
- Sie können jeden Animationswert mit einer Erweiterungsfunktion für das Übergangsobjekt deklarieren.
- Wenn Sie das Animationsverhalten anpassen möchten, geben Sie den Parameter
transitionSpec an.
AnimatedVisibility ist nützlich, um das Erscheinen und Verschwinden zu animieren.- Sie können das Verhalten der Animation anpassen, indem Sie Parameter für das Ein- und Ausblenden angeben.
- Verwenden Sie den Modifikator
animateContentSize, um Größenänderungen von Elementen zu animieren.
- Wenn Sie Änderungen animieren möchten, wenn Sie Teile Ihrer Benutzeroberfläche austauschen, verwenden Sie das
Crossfade-Komposit.
Sammlungen, die diesen Leitfaden enthalten
Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:
Grundlagen der Komposition
In dieser Videoreihe werden verschiedene Compose APIs vorgestellt. Sie erhalten einen schnellen Überblick über die verfügbaren APIs und ihre Verwendung.
Bilder anzeigen
Hier erfahren Sie, wie Sie mit leuchtenden, ansprechenden visuellen Elementen Ihrer Android-App ein ansprechendes Erscheinungsbild verleihen.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-02-06 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-02-06 (UTC)."],[],[],null,["# Animation in Compose\n\n\u003cbr /\u003e\n\nSee how to animate state values, using transitions, animating visibility or size\nchanges and crossfades by using the Compose animation APIs. \n\nKey points\n----------\n\n- The [`animate*AsState`](/reference/kotlin/androidx/compose/animation/core/package-summary#animateDpAsState(androidx.compose.ui.unit.Dp,androidx.compose.animation.core.AnimationSpec,kotlin.String,kotlin.Function1)) API is useful for animating a single value based on a state change.\n- To animate multiple values at the same time, create a transition with the [`updateTransition`](/reference/kotlin/androidx/compose/animation/core/package-summary#updateTransition(kotlin.Any,kotlin.String)) function.\n - You can declare each animation value with an extension function on the transition object.\n- To customize the animation behavior, specify the `transitionSpec` parameter.\n- [`AnimatedVisibility`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)) is useful for animating appearance and disappearance.\n- Customize animation behavior by specifying parameters for enter and exit.\n- To animate size changes of elements, use the [`animateContentSize`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)) modifier.\n- To animate changes when you swap out portions of your UI, use the [`Crossfade`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.Transition).Crossfade(androidx.compose.ui.Modifier,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1,kotlin.Function1)) composable.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Compose basics\n\nThis series of videos introduces various Compose APIs, quickly showing you what's available and how to use them. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/compose-basics) \n\n### Display images\n\nDiscover techniques for using bright, engaging visuals to give your Android app a beautiful look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-images) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
