AnimatedVisibility et Crossfade
Animez l’apparition et le remplacement du contenu.
AnimatedVisibility et Crossfade est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Animating What Appears
Sometimes you want content to slide or fade in rather than pop. AnimatedVisibility animates a Composable as it enters and exits the screen. ✨
Wrap What You Show
Give AnimatedVisibility a boolean and a content lambda. When the boolean flips, it animates that content in or out for you.
AnimatedVisibility(visible = show) {
Text("Hello!")
}Default Enter and Exit
Out of the box it uses a gentle fade plus expand and shrink. The element appears and disappears smoothly without any extra configuration.
Customize the Entrance
Set the enter parameter to choose how content arrives. Combine transitions like fadeIn and slideInVertically with the plus operator.
enter = fadeIn() + slideInVertically()Customize the Exit
The exit parameter controls how content leaves. You can mirror the entrance or pick a different effect like shrinkOut for variety.
exit = fadeOut() + shrinkVertically()Slide, Expand, Scale
Compose ships many transitions: slideIn, expandHorizontally, scaleIn, and their exit pairs. Mix them to design exactly the motion you want.
Swapping Content Smoothly
To replace one Composable with another, reach for Crossfade. It fades the old content out while the new content fades in. 🔀
Crossfade on a Key
Give Crossfade a targetState. Whenever that value changes, it animates between the content produced for the old and new states.
Crossfade(targetState = screen) { current ->
ScreenFor(current)
}Great for Tabs and Screens
Crossfade shines when switching between distinct views, like loading versus loaded states or two tabs, giving a polished blend instead of a jarring swap.
Tune the Crossfade Timing
Pass an animationSpec to Crossfade to slow down or speed up the blend. A longer tween makes the transition feel softer and more deliberate.
Crossfade(state, animationSpec = tween(700)) { ... }Pick the Right Tool
Use AnimatedVisibility to show or hide one thing, and Crossfade to swap between alternatives. Each solves a different appearance problem.
Quick Check
Which Composable smoothly swaps one piece of content for another?
Recap: Enter, Exit, Swap
You now animate appearance with AnimatedVisibility and blend between views with Crossfade, customizing enter, exit, and timing. 🎉
Questions Fréquemment Posées
La leçon « AnimatedVisibility et Crossfade » est-elle gratuite ?
Oui — le texte complet de « AnimatedVisibility et Crossfade » 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 Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « AnimatedVisibility et Crossfade » ?
Animez l’apparition et le remplacement du contenu. Tu pratiques Jetpack Compose 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 Jetpack Compose Academy ?
Aucune expérience préalable n'est requise. Jetpack Compose 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 2 sur 4.
Combien de temps prend la leçon « AnimatedVisibility et Crossfade » ?
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 Jetpack Compose Academy ?
Oui. Chaque leçon Jetpack Compose 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
- animate*AsState pour des interpolations simples
- AnimatedVisibility et Crossfade
- updateTransition pour des mouvements coordonnés
- Animations pilotées par les gestes