Cinq animations rapides dans Compose
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Ces cinq animations rapides et faciles peuvent vous aider à donner vie à votre application en quelques minutes. Faites en sorte que votre application Compose se démarque, même si vous n'avez pas le temps d'apprendre tout ce qu'il faut savoir sur les animations.
Points essentiels
- Encapsulez les états visibles en cours de modification dans un composable
AnimatedVisibility
pour transformer la façon dont les changements d'état s'affichent à l'écran.
- Pour effectuer une transition fluide entre deux états, utilisez le modificateur intégré
animateContentSize
.
- Encapsulez une condition
when
dans un composable AnimatedContent
pour changer de contenu en fonction des états cibles fournis.
- Utilisez des fonctions
animate*AsState
pour effectuer l'animation lorsque l'état de votre variable d'entrée change.
- Compose déclenche un redessin lorsque les variables changent au fil du temps, créant une animation à l'écran.
Ressources
Collections contenant ce guide
Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:
Afficher les images
Découvrez des techniques pour utiliser des visuels lumineux et attrayants afin de donner à votre application Android une belle apparence.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/02/06 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/02/06 (UTC)."],[],[],null,["# Five quick animations in Compose\n\n\u003cbr /\u003e\n\nThese 5 quick and easy animations can help make your app come to life in just a\nfew minutes. Make your Compose app stand out even if you don't have the time to\nlearn everything there is to know about animations. \n\nKey points\n----------\n\n- Wrap changing visible states in an [`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)) composable to transform how state changes show on screen.\n- To smoothly transition between two states, use the built-in modifier [`animateContentSize`](/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.ui.Modifier).animateContentSize(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function2)).\n- Wrap a `when` conditional in an [`AnimatedContent`](/reference/kotlin/androidx/compose/animation/package-summary#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.String,kotlin.Function1,kotlin.Function2)) composable to switch content based on the provided target states.\n- Use [`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)) functions to perform the animation when the state of your input variable changes.\n- Compose triggers a redraw as variables change over time, creating an animation on screen.\n\nResources\n---------\n\n- [Blog: Customizing AnimatedContent in Jetpack Compose](https://medium.com/androiddevelopers/customizing-animatedcontent-in-jetpack-compose-629c67b45894)\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### 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)"]]