Android Academy · Leçon

Animations et transitions

Animez les vues avec ViewPropertyAnimator, ObjectAnimator et AnimatorSet. Ajoutez des transitions de fragments, des animations d’éléments partagés et une physique de ressort.

Animations et transitions est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 5. 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 5 leçons au total.

Pourquoi les animations sont importantes

Les animations rendent les applications vivantes et réactives. Elles :

Fournissent un retour visuel lors des actions de l'utilisateur
Montrent les liens entre les écrans
Rendent les changements de données moins brusques
Aident les utilisateurs à comprendre ce qui a changé et pourquoi

La règle essentielle : les animations doivent servir l'interface, et non détourner l'attention. Limitez-les à moins de 300 ms.

ViewPropertyAnimator — animations rapides

La manière la plus simple d'animer une vue. Enchaînez les appels, puis appelez start() :

// Fade a view out:
binding.tvMessage
    .animate()
    .alpha(0f)
    .setDuration(300)
    .withEndAction { binding.tvMessage.visibility = View.GONE }
    .start()

// Slide in from bottom:
binding.cardView.translationY = 200f
binding.cardView.alpha = 0f
binding.cardView
    .animate()
    .translationY(0f)
    .alpha(1f)
    .setDuration(250)
    .setInterpolator(DecelerateInterpolator())
    .start()

ObjectAnimator

ObjectAnimator anime n'importe quelle propriété de n'importe quel objet à partir de son nom. Il est plus flexible que ViewPropertyAnimator :

// Rotate an image:
val rotateAnimator = ObjectAnimator.ofFloat(
    binding.ivLogo,
    "rotation",
    0f, 360f
).apply {
    duration = 600
    repeatCount = ObjectAnimator.INFINITE
    interpolator = LinearInterpolator()
    start()
}

// Stop it:
rotateAnimator.cancel()

AnimatorSet — séquentiel et parallèle

AnimatorSet orchestre plusieurs animateurs pour les exécuter ensemble ou l'un après l'autre :

val fadeIn  = ObjectAnimator.ofFloat(binding.card, "alpha", 0f, 1f).setDuration(300)
val scaleX  = ObjectAnimator.ofFloat(binding.card, "scaleX", 0.8f, 1f).setDuration(300)
val scaleY  = ObjectAnimator.ofFloat(binding.card, "scaleY", 0.8f, 1f).setDuration(300)
val slideUp = ObjectAnimator.ofFloat(binding.card, "translationY", 100f, 0f).setDuration(300)

AnimatorSet().apply {
    // Run fadeIn + scaleX + scaleY together, then slideUp
    play(fadeIn).with(scaleX).with(scaleY)
    play(slideUp).after(fadeIn)
    interpolator = DecelerateInterpolator()
    start()
}

Interpoleurs

Les interpoleurs contrôlent le rythme de variation d'une animation. Les plus courants sont :

LinearInterpolator — vitesse constante
AccelerateInterpolator — démarrage lent puis accélération (sorties)
DecelerateInterpolator — démarrage rapide puis ralentissement (entrées)
AccelerateDecelerateInterpolator — lent → rapide → lent (par défaut)
OvershootInterpolator — dépasse la cible puis revient en rebondissant
BounceInterpolator — rebondit à la fin

TransitionManager — changements de mise en page

Animez automatiquement les changements de mise en page en appelant TransitionManager.beginDelayedTransition() avant de modifier la visibilité ou les propriétés de mise en page :

binding.btnToggle.setOnClickListener {
    // Tell the framework to animate the next layout change
    TransitionManager.beginDelayedTransition(
        binding.root,
        ChangeBounds().apply { duration = 300 }
    )

    // Now change visibility/size — Android animates the difference automatically
    binding.expandedSection.visibility =
        if (binding.expandedSection.isVisible) View.GONE else View.VISIBLE
}

Transitions entre fragments

Ajoutez des animations d'entrée et de sortie aux transactions de fragments :

supportFragmentManager.beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in_right,   // enterAnim
        R.anim.slide_out_left,   // exitAnim
        R.anim.slide_in_left,    // popEnterAnim
        R.anim.slide_out_right   // popExitAnim
    )
    .replace(R.id.container, DetailFragment())
    .addToBackStack(null)
    .commit()

// Or use MaterialSharedAxis for a modern, Material Motion feel:
val forward = MaterialSharedAxis(MaterialSharedAxis.X, true)
exitTransition = forward
enterTransition = MaterialSharedAxis(MaterialSharedAxis.X, true)

Transitions d'éléments partagés

Partagez une vue entre deux écrans afin qu'elle s'anime d'une position à l'autre (par exemple, une miniature qui s'agrandit pour devenir une image complète) :

// In ListFragment:
binding.ivThumbnail.transitionName = "hero_image_${item.id}"

val extras = FragmentNavigatorExtras(
    binding.ivThumbnail to "hero_image_${item.id}"
)
findNavController().navigate(R.id.action_list_to_detail, null, null, extras)

// In DetailFragment:
sharedElementEnterTransition = TransitionInflater
    .from(requireContext())
    .inflateTransition(android.R.transition.move)

// ImageView in detail layout must have the same transitionName

Animation par ressort

Les animations par ressort semblent plus naturelles que les animations linéaires ou avec décélération, car elles simulent le comportement physique d'un ressort :

implementation 'androidx.dynamicanimation:dynamicanimation:1.0.0'

// Spring animation on a button press:
val spring = SpringAnimation(binding.fabAdd, DynamicAnimation.SCALE_X, 1f).apply {
    spring = SpringForce(1f).apply {
        stiffness = SpringForce.STIFFNESS_MEDIUM
        dampingRatio = SpringForce.DAMPING_RATIO_LOW_BOUNCY
    }
}

binding.fabAdd.setOnClickListener {
    binding.fabAdd.scaleX = 0.8f
    spring.start()
}

Lottie — animations complexes

Lottie lit les animations After Effects exportées au format JSON. C'est idéal pour les indicateurs de chargement, les écrans d'introduction et les états vides :

// app/build.gradle:
// implementation 'com.airbnb.android:lottie:6.4.0'

<!-- In layout XML -->
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

// Control in code:
binding.lottieView.playAnimation()
binding.lottieView.pauseAnimation()

Bonnes pratiques pour les animations

Recommandations pour des animations fluides et accessibles :

Une durée de 150 à 300 ms pour la plupart des animations d'interface
Respectez toujours AnimatorUtils.areAnimatorsEnabled() ou Settings.System.ANIMATOR_DURATION_SCALE
Les utilisateurs souffrant de troubles vestibulaires peuvent désactiver les animations — vérifiez le réglage d'accessibilité Reduce Motion
N'animez pas les éléments qui n'en ont pas besoin — la simplicité est préférable
Testez sur des appareils peu puissants (les animations peuvent provoquer des pertes d'images)

Vérification rapide

Quel interpoleur convient le mieux à un élément entrant à l'écran pour donner l'impression qu'il ralentit et se stabilise ?

Récapitulatif : animations et transitions

Donnez vie à votre application grâce à des animations fluides :

view.animate() — alpha, translation, mise à l’échelle et rotation rapides
ObjectAnimator — n’importe quelle propriété, avec un contrôle précis
AnimatorSet — orchestrez plusieurs animateurs (avec/après)
TransitionManager.beginDelayedTransition() — anime automatiquement les changements de disposition
Transitions d’éléments partagés — une continuité fluide entre les écrans
Lottie — des animations JSON complexes créées avec After Effects

Ensuite : la navigation inférieure et les onglets pour les applications à plusieurs sections.

Questions Fréquemment Posées

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

Oui — le texte complet de « Animations 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 5 leçons au total.

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

Animez les vues avec ViewPropertyAnimator, ObjectAnimator et AnimatorSet. Ajoutez des transitions de fragments, des animations d’éléments partagés et une physique de ressort. 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 4 sur 5.

Combien de temps prend la leçon « Animations 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

← Retour à Android Academy