Android Academy · Leçon

AnimatedVisibility et transitions

Animez l’affichage et le masquage du contenu.

Leçon 3 sur 413 étapes

AnimatedVisibility et transitions est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.

Animer l’apparition

Afficher et masquer brusquement du contenu donne une impression saccadée. Le composable AnimatedVisibility de Compose anime un composable lorsqu’il entre dans la mise en page et lorsqu’il en sort.

Encapsulez votre contenu dans ce composable et contrôlez sa visibilité avec une valeur booléenne. Lorsque cette valeur change, Compose joue une animation d’entrée ou de sortie au lieu de faire apparaître ou disparaître le contenu instantanément.

@Composable
fun Greeting(show: Boolean) {
    AnimatedVisibility(visible = show) {
        Text("Welcome aboard!")
    }
}

Transitions d’entrée et de sortie

Vous pouvez choisir précisément comment le contenu entre et sort avec les paramètres enter et exit. Les éléments de base courants incluent fadeIn/fadeOut, slideIn/slideOut et expandVertically/shrinkVertically.

Combinez-les avec l’opérateur + pour les exécuter simultanément.

@Composable
fun Toast(show: Boolean) {
    AnimatedVisibility(
        visible = show,
        enter = fadeIn() + slideInVertically { it },
        exit = fadeOut() + slideOutVertically { it }
    ) {
        Text("Item added to cart")
    }
}

Ajuster la spécification de transition

Chaque transition d’entrée ou de sortie accepte une animationSpec, ce qui vous permet de contrôler la durée et la courbe d’accélération comme avec animate*AsState.

Ici, le contenu apparaît progressivement sur 300 ms et disparaît plus rapidement, en 150 ms : un schéma courant qui donne aux fermetures une sensation réactive.

AnimatedVisibility(
    visible = show,
    enter = fadeIn(animationSpec = tween(300)),
    exit = fadeOut(animationSpec = tween(150))
) {
    Card { Text("Details") }
}

Développer et réduire

Pour les sections qui dévoilent davantage de contenu, expandVertically et shrinkVertically animent la hauteur et repoussent progressivement le contenu environnant.

C’est idéal pour les panneaux réductibles, les éléments de FAQ ou les sections « afficher plus ».

@Composable
fun Details(expanded: Boolean) {
    AnimatedVisibility(
        visible = expanded,
        enter = expandVertically() + fadeIn(),
        exit = shrinkVertically() + fadeOut()
    ) {
        Text("Extra details revealed when expanded.")
    }
}

updateTransition : un état, plusieurs valeurs

Lorsque plusieurs propriétés doivent changer ensemble en fonction d’un même état, updateTransition les coordonne. Cette fonction crée un objet Transition dont les éléments enfants s’animent tous en synchronisation.

Définissez l’état, puis utilisez animateColor, animateDp, etc., pour chaque propriété en fonction de cet état.

enum class BoxState { Collapsed, Expanded }

@Composable
fun MorphingBox(state: BoxState) {
    val transition = updateTransition(state, label = "box")
    val size by transition.animateDp(label = "size") {
        if (it == BoxState.Expanded) 200.dp else 100.dp
    }
    val color by transition.animateColor(label = "color") {
        if (it == BoxState.Expanded) Color.Magenta else Color.Cyan
    }
    Box(Modifier.size(size).background(color))
}

Minutage par propriété dans une transition

Le minutage par propriété est un avantage majeur de updateTransition. Chaque élément enfant animate* peut fournir sa propre transitionSpec, ce qui permet à la couleur et à la taille d’évoluer à des vitesses différentes tout en restant coordonnées par le même état.

val size by transition.animateDp(
    transitionSpec = { tween(durationMillis = 300) },
    label = "size"
) { if (it == BoxState.Expanded) 200.dp else 100.dp }

val corner by transition.animateDp(
    transitionSpec = { tween(durationMillis = 600) },
    label = "corner"
) { if (it == BoxState.Expanded) 0.dp else 24.dp }

AnimatedContent : remplacer le contenu

Lorsque le contenu lui-même change, et pas seulement sa visibilité, utilisez AnimatedContent. Cette fonction anime le passage de l’ancien contenu au nouveau, avec un fondu croisé par défaut.

C’est idéal pour des éléments comme un compteur, un indicateur d’étape ou le passage d’un état de chargement à un état chargé.

@Composable
fun Counter(count: Int) {
    AnimatedContent(
        targetState = count,
        label = "counter"
    ) { value ->
        Text("$value", style = MaterialTheme.typography.headlineLarge)
    }
}

Personnaliser les transitions de AnimatedContent

Personnalisez la manière dont AnimatedContent remplace le contenu avec transitionSpec. Pour un compteur, il est classique de faire glisser la nouvelle valeur vers le haut tandis que l’ancienne s’éloigne, le tout associé à un fondu.

Le mot-clé using associe un SizeTransform afin que le conteneur se redimensionne lui aussi progressivement.

AnimatedContent(
    targetState = count,
    transitionSpec = {
        (slideInVertically { it } + fadeIn()) togetherWith
            (slideOutVertically { -it } + fadeOut())
    },
    label = "counter"
) { value -> Text("$value") }

Animer les éléments d’une liste

Dans une LazyColumn, les éléments ajoutés, supprimés ou déplacés peuvent s’animer jusqu’à leur position avec Modifier.animateItem() appliqué au contenu de chaque élément.

Vous obtenez ainsi un réordonnancement et des insertions fluides, sans devoir gérer manuellement les éléments.

LazyColumn {
    items(tasks, key = { it.id }) { task ->
        Text(
            task.title,
            modifier = Modifier.animateItem()
        )
    }
}

Fondu croisé pour des écrans entiers

Crossfade est une fonction auxiliaire simple et ciblée qui effectue un fondu entre deux états. Elle convient parfaitement au changement d’écran entier ou d’état majeur de l’interface.

Transmettez l’état actuel et une lambda de contenu ; lorsque l’état change, Crossfade fait disparaître l’ancien contenu et apparaître le nouveau.

@Composable
fun ScreenHost(screen: Screen) {
    Crossfade(targetState = screen, label = "screen") { current ->
        when (current) {
            Screen.Home -> HomeScreen()
            Screen.Profile -> ProfileScreen()
        }
    }
}

Coordonner les enfants à l’entrée

À l’intérieur d’un bloc AnimatedVisibility, vous disposez d’un AnimatedVisibilityScope, qui expose Modifier.animateEnterExit(). Cela permet à chaque enfant de disposer de sa propre animation d’entrée ou de sortie, en plus de la transition du parent.

Par exemple, un panneau peut glisser à l’écran tandis que son titre apparaît légèrement plus tard pour créer un effet en couches.

AnimatedVisibility(visible = show, enter = slideInVertically()) {
    Column {
        Text(
            "Title",
            modifier = Modifier.animateEnterExit(
                enter = fadeIn(tween(delayMillis = 100))
            )
        )
        Text("Body")
    }
}

Vérification rapide

Vous souhaitez animer le remplacement du nombre 3 par le nombre 4, en faisant apparaître la nouvelle valeur avec un fondu et un glissement. Quelle API convient le mieux ?

Réponds-y dans la leçon interactive

Récapitulatif : visibilité et transitions

Vous pouvez désormais animer l’apparition, la disparition et la modification du contenu :

AnimatedVisibility anime l’entrée et la sortie avec fadeIn/Out, slideIn/Out et expand/shrink, combinables avec +.
updateTransition coordonne plusieurs valeurs à partir d’un même état, chacune avec sa propre spécification.
AnimatedContent anime le remplacement de contenus différents ; Crossfade en est la variante simple avec fondu.
Modifier.animateItem() anime l’insertion et le réordonnancement des éléments d’une liste.

Ensuite : les gestes et les animations de ressort fondées sur la physique pour créer des mouvements naturels et interactifs.

Gratuit pour commencer

Apprends Kotlin avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 36
Leçons: 152

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « AnimatedVisibility et transitions » est-elle gratuite ?

Oui — le texte complet de « AnimatedVisibility et transitions » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « AnimatedVisibility et transitions » ?

Animez l’affichage et le masquage du contenu. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « AnimatedVisibility et transitions » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Pourquoi les animations sont importantes
Principes d’animate*AsState
AnimatedVisibility et transitions
Animations gestuelles et à ressort

← Retour à Android Academy