Pourquoi les animations sont importantes
Des mouvements qui guident et ravissent les utilisateurs.
Pourquoi les animations sont importantes est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
Des animations qui ont un objectif
Les animations ne sont pas qu'un plaisir pour les yeux. Dans une excellente application Android, le mouvement guide l'attention, explique ce qui a changé et donne à l'interface une apparence réactive et vivante.
Dans ce cours, vous découvrirez les API d'animation de Jetpack Compose, des assistants animate*AsState utilisables en une ligne à AnimatedVisibility, en passant par les transitions et les ressorts fondés sur la physique.
Cette première leçon explique pourquoi et quand utiliser des animations, afin que chaque mouvement ait toujours une fonction.
Compose anime de manière déclarative
Dans Compose, vous ne démarrez ni n'arrêtez manuellement les animations image par image. Vous décrivez plutôt une valeur cible, puis Compose anime progressivement vers cette valeur chaque fois qu'elle change.
Ici, la couleur d'une boîte dépend d'un seul état booléen. Un appui inverse l'état et la couleur change automatiquement de manière fluide.
@Composable
fun ColorBox() {
var selected by remember { mutableStateOf(false) }
val color by animateColorAsState(
targetValue = if (selected) Color.Green else Color.Gray,
label = "box-color"
)
Box(
Modifier
.size(120.dp)
.background(color)
.clickable { selected = !selected }
)
}Fournir un retour après les actions de l'utilisateur
L'une des fonctions les plus importantes du mouvement est le retour. Lorsqu'un utilisateur appuie sur un bouton ou actionne un interrupteur, une petite animation confirme que l'application a bien reçu l'action.
Les changements instantanés et brusques donnent une impression de dysfonctionnement ; une transition rapide de 150 à 300 ms paraît soignée. Ici, un bouton rétrécit légèrement lorsqu'il est enfoncé.
@Composable
fun PressableButton(onClick: () -> Unit) {
var pressed by remember { mutableStateOf(false) }
val scale by animateFloatAsState(
targetValue = if (pressed) 0.92f else 1f,
label = "press-scale"
)
Button(
onClick = onClick,
modifier = Modifier.graphicsLayer {
scaleX = scale; scaleY = scale
}
) { Text("Tap me") }
}Expliquer les changements d'état
Lorsque l'interface change, l'animation aide l'utilisateur à comprendre ce qui vient de se passer. Un élément qui apparaît en fondu et en glissant est perçu comme « nouveau » ; un élément qui disparaît en fondu est perçu comme « supprimé ».
Sans mouvement, le contenu peut apparaître ou disparaître brusquement, laissant l'utilisateur dans le doute : quelque chose est-il apparu, a-t-il disparu ou s'est-il déplacé ?
@Composable
fun Banner(visible: Boolean) {
AnimatedVisibility(
visible = visible,
enter = fadeIn() + slideInVertically(),
exit = fadeOut() + slideOutVertically()
) {
Text("Saved successfully!")
}
}Continuité et perception de l'espace
Le mouvement préserve la continuité. Lorsqu'une carte s'agrandit ou qu'un élément se déplace vers une nouvelle position, animer le changement aide l'utilisateur à se repérer dans l'espace.
Compose peut animer automatiquement les changements de disposition avec Modifier.animateContentSize(), afin qu'une boîte s'agrandisse ou rétrécisse progressivement lorsque son contenu change.
@Composable
fun ExpandableCard(expanded: Boolean) {
Column(
Modifier
.fillMaxWidth()
.animateContentSize()
.padding(16.dp)
) {
Text("Title", style = MaterialTheme.typography.titleMedium)
if (expanded) {
Text("Here is the longer body that appears when expanded.")
}
}
}La durée et le rythme sont importants
Une bonne animation est rapide. La plupart des transitions d'interface devraient durer environ entre 150 et 400 ms. Si elle est trop lente, l'application semble manquer de réactivité ; si elle est trop rapide, le mouvement devient imperceptible.
Compose vous permet d'ajuster la durée et le rythme avec tween et une courbe easing. L'interpolation rend le mouvement naturel en l'accélérant puis en le ralentissant.
val offset by animateDpAsState(
targetValue = if (open) 0.dp else 200.dp,
animationSpec = tween(
durationMillis = 300,
easing = FastOutSlowInEasing
),
label = "panel-offset"
)N'en faites pas trop
L'animation est puissante, ce qui signifie qu'il est facile d'en abuser. Trop de mouvement est distrayant, ralentit les utilisateurs et peut même provoquer de l'inconfort.
Quelques règles générales :
- Animez pour communiquer, pas pour décorer.
- Gardez les transitions courtes et discrètes.
- Évitez d'animer tout ce qui se trouve à l'écran en même temps.
- Ne bloquez jamais l'utilisateur pendant une animation.
Respecter l'accessibilité
Certains utilisateurs activent l'option Supprimer les animations dans les paramètres système en raison d'une sensibilité au mouvement. Une application attentive respecte cette préférence.
Vous pouvez vérifier si les animations sont réduites à zéro, puis réduire ou désactiver en conséquence les mouvements non essentiels.
@Composable
fun rememberReduceMotion(): Boolean {
val context = LocalContext.current
val scale = Settings.Global.getFloat(
context.contentResolver,
Settings.Global.ANIMATOR_DURATION_SCALE,
1f
)
return scale == 0f
}La boîte à outils des animations Compose
Compose propose un ensemble d’API d’animation organisées en plusieurs niveaux. Vous les découvrirez au fil de ce cours :
animate*AsState: anime une valeur unique (couleur, taille, nombre flottant).AnimatedVisibility: anime l’apparition et la disparition.updateTransition: coordonne plusieurs valeurs ensemble.AnimatedContent: effectue un fondu entre différents contenus.Animatableetspring: offrent un contrôle de bas niveau fondé sur la physique.
Commencez par les API de haut niveau et descendez d’un niveau uniquement lorsque vous avez besoin de davantage de contrôle.
L’animation suit l’état
Le modèle mental qui permet de tout comprendre : dans Compose, les animations suivent l’état. Vous modifiez une valeur, et une API d’animation interpole progressivement l’interface vers la nouvelle valeur à chaque image.
Cela signifie que vous écrivez rarement une chronologie. Vous déclarez « cette propriété doit être égale à X » et Compose gère pour vous les images intermédiaires.
@Composable
fun FadingText(highlighted: Boolean) {
val alpha by animateFloatAsState(
targetValue = if (highlighted) 1f else 0.4f,
label = "text-alpha"
)
Text(
"Status",
modifier = Modifier.graphicsLayer { this.alpha = alpha }
)
}Un bref échauffement en Kotlin pur
Les animations interpolent entre des valeurs. À la base, ce n’est que des mathématiques : une fraction t comprise entre 0 et 1 mélange une valeur de départ et une valeur finale. Cette idée (l’interpolation linéaire, ou lerp) est au cœur de toutes les animations que vous allez écrire.
Cet extrait minimal en Kotlin pur montre le concept que Compose applique plusieurs fois par seconde.
fun lerp(start: Float, end: Float, t: Float): Float =
start + (end - start) * t
fun main() {
for (i in 0..4) {
val t = i / 4f
println("t=$t -> ${lerp(0f, 100f, t)}")
}
}Vérification rapide
Quel est le modèle mental fondamental des animations dans Jetpack Compose ?
Récapitulatif : un mouvement porteur de sens
Vous savez maintenant pourquoi l’animation est importante et quel modèle la sous-tend :
- Le mouvement fournit un retour, explique les changements et préserve la continuité.
- Les animations Compose sont déclaratives et suivent l’état.
- Gardez les transitions courtes (≈150-400 ms) et pertinentes ; n’en faites pas trop.
- Respectez les utilisateurs qui réduisent les mouvements pour des raisons d’accessibilité.
- Privilégiez d’abord les API de haut niveau :
animate*AsState,AnimatedVisibility, les transitions et les ressorts.
Ensuite : animer des valeurs uniques avec la famille animate*AsState.
Questions Fréquemment Posées
La leçon « Pourquoi les animations sont importantes » est-elle gratuite ?
Oui — le texte complet de « Pourquoi les animations sont importantes » 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 « Pourquoi les animations sont importantes » ?
Des mouvements qui guident et ravissent les utilisateurs. 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 1 sur 4.
Combien de temps prend la leçon « Pourquoi les animations sont importantes » ?
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