Guide rapide sur les animations dans Compose

Compose dispose de nombreux mécanismes d'animation intégrés, et il peut être difficile de savoir lequel choisir. Vous trouverez ci-dessous une liste de cas d'utilisation courants des animations. Pour en savoir plus sur les différentes options d'API disponibles, consultez la documentation complète sur les animations dans Compose.

Animer les propriétés communes des composables

Compose fournit des API pratiques qui vous permettent de résoudre de nombreux cas d'utilisation d'animation courants. Cette section explique comment animer les propriétés courantes d'un composable.

Apparition / Disparition d'animations

Figure 1. Animer l'apparence et la disparition d'un élément dans une colonne

Utilisez AnimatedVisibility pour masquer ou afficher un composable. Les enfants dans AnimatedVisibility peuvent utiliser Modifier.animateEnterExit() pour leur propre transition d'entrée ou de sortie.

var visible by remember {
    mutableStateOf(true)
}
// Animated visibility will eventually remove the item from the composition once the animation has finished.
AnimatedVisibility(visible) {
    // your composable here
    // ...
}
AnimationQuickGuide.kt

Les paramètres d'entrée et de sortie de AnimatedVisibility vous permettent de configurer le comportement d'un composable lorsqu'il apparaît et disparaît. Pour en savoir plus, consultez la documentation complète.

Une autre option pour animer la visibilité d'un composable consiste à animer la version alpha au fil du temps à l'aide de animateFloatAsState:

var visible by remember {
    mutableStateOf(true)
}
val animatedAlpha by animateFloatAsState(
    targetValue = if (visible) 1.0f else 0f,
    label = "alpha"
)
Box(
    modifier = Modifier
        .size(200.dp)
        .graphicsLayer {
            alpha = animatedAlpha
        }
        .clip(RoundedCornerShape(8.dp))
        .background(colorGreen)
        .align(Alignment.TopCenter)
) {
}
AnimationQuickGuide.kt

Cependant, la modification de la valeur alpha s'accompagne d'une mise en garde : le composable reste dans la composition et continue d'occuper l'espace dans lequel il est disposé. Par conséquent, les lecteurs d'écran et d'autres mécanismes d'accessibilité pourraient continuer de prendre en compte l'élément à l'écran. En revanche, AnimatedVisibility supprime l'élément de la composition.

Figure 2 : Animer la version alpha d'un composable

Animer la couleur d'arrière-plan

Figure 3. Animer la couleur d'arrière-plan du composable

val animatedColor by animateColorAsState(
    if (animateBackgroundColor) colorGreen else colorBlue,
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(animatedColor)
    }
) {
    // your composable here
}
AnimationQuickGuide.kt

Cette option est plus performante que l'utilisation de Modifier.background(). Modifier.background() est acceptable pour un paramètre de couleur one-shot, mais lorsque vous animez une couleur au fil du temps, cela peut entraîner plus de recompositions que nécessaire.

Pour animer la couleur d'arrière-plan à l'infini, consultez la section Répéter une animation.

Animer la taille d'un composable

Figure 4. Composable avec animation fluide entre une petite et une taille plus grande

Compose vous permet d'animer la taille des composables de différentes manières. Utilisez animateContentSize() pour les animations entre les changements de taille des composables.

Par exemple, si l'une de vos zones de texte peut se développer d'une à plusieurs lignes, vous pouvez utiliser Modifier.animateContentSize() pour effectuer une transition plus fluide:

var expanded by remember { mutableStateOf(false) }
Box(
    modifier = Modifier
        .background(colorBlue)
        .animateContentSize()
        .height(if (expanded) 400.dp else 200.dp)
        .fillMaxWidth()
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            expanded = !expanded
        }

) {
}
AnimationQuickGuide.kt

Remarque :L'ordre des modificateurs est important ici. Veillez à le placer avant tout modificateur de taille.

Vous pouvez également utiliser AnimatedContent, avec un SizeTransform pour décrire comment les changements de taille doivent se produire.

Animer la position du composable

Figure 5 : Composable en mouvement par un décalage

Pour animer la position d'un composable, utilisez Modifier.offset{ } en combinaison avec animateIntOffsetAsState().

var moved by remember { mutableStateOf(false) }
val pxToMove = with(LocalDensity.current) {
    100.dp.toPx().roundToInt()
}
val offset by animateIntOffsetAsState(
    targetValue = if (moved) {
        IntOffset(pxToMove, pxToMove)
    } else {
        IntOffset.Zero
    },
    label = "offset"
)

Box(
    modifier = Modifier
        .offset {
            offset
        }
        .background(colorBlue)
        .size(100.dp)
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            moved = !moved
        }
)
AnimationQuickGuide.kt

Attention :Cela ne change pas l'endroit où le parent perçoit le composable comme étant placé. Cela n'affecte donc pas l'emplacement des frères et sœurs. Par conséquent, les frères et sœurs peuvent se superposer ou se superposer. Le décalage affecte uniquement la position des mises en page enfants de Modifier.offset{}.

Pour vous assurer que les composables ne sont pas dessinés sur ou sous d'autres composables lors de l'animation de la position ou de la taille, utilisez Modifier.layout{ }. Ce modificateur propage les changements de taille et de position au parent, ce qui affecte ensuite les autres enfants.

Par exemple, si vous déplacez un Box dans un Column et que les autres enfants doivent être déplacés lors du déplacement de Box, incluez les informations de décalage avec Modifier.layout{ } comme suit:

var toggled by remember {
    mutableStateOf(false)
}
val interactionSource = remember {
    MutableInteractionSource()
}
Column(
    modifier = Modifier
        .padding(16.dp)
        .fillMaxSize()
        .clickable(indication = null, interactionSource = interactionSource) {
            toggled = !toggled
        }
) {
    val offsetTarget = if (toggled) {
        IntOffset(150, 150)
    } else {
        IntOffset.Zero
    }
    val offset = animateIntOffsetAsState(
        targetValue = offsetTarget, label = "offset"
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
    Box(
        modifier = Modifier
            .layout { measurable, constraints ->
                val offsetValue = if (isLookingAhead) offsetTarget else offset.value
                val placeable = measurable.measure(constraints)
                layout(placeable.width + offsetValue.x, placeable.height + offsetValue.y) {
                    placeable.placeRelative(offsetValue)
                }
            }
            .size(100.dp)
            .background(colorGreen)
    )
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(colorBlue)
    )
}
AnimationQuickGuide.kt

Figure 6 : Animation avec Modifier.layout{ }

Animer la marge intérieure d'un composable

Figure 7 : Composable avec sa marge intérieure animée

Pour animer la marge intérieure d'un composable, utilisez animateDpAsState en combinaison avec Modifier.padding():

var toggled by remember {
    mutableStateOf(false)
}
val animatedPadding by animateDpAsState(
    if (toggled) {
        0.dp
    } else {
        20.dp
    },
    label = "padding"
)
Box(
    modifier = Modifier
        .aspectRatio(1f)
        .fillMaxSize()
        .padding(animatedPadding)
        .background(Color(0xff53D9A1))
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null
        ) {
            toggled = !toggled
        }
)
AnimationQuickGuide.kt

Animer l'élévation d'un composable

Figure 8. Animation de l'élévation du composable lors d'un clic

Pour animer l'élévation d'un composable, utilisez animateDpAsState en combinaison avec Modifier.graphicsLayer{ }. Pour les changements d'altitude ponctuels, utilisez Modifier.shadow(). Si vous animez l'ombre, le modificateur Modifier.graphicsLayer{ } est l'option la plus performante.

val mutableInteractionSource = remember {
    MutableInteractionSource()
}
val pressed = mutableInteractionSource.collectIsPressedAsState()
val elevation = animateDpAsState(
    targetValue = if (pressed.value) {
        32.dp
    } else {
        8.dp
    },
    label = "elevation"
)
Box(
    modifier = Modifier
        .size(100.dp)
        .align(Alignment.Center)
        .graphicsLayer {
            this.shadowElevation = elevation.value.toPx()
        }
        .clickable(interactionSource = mutableInteractionSource, indication = null) {
        }
        .background(colorGreen)
) {
}
AnimationQuickGuide.kt

Vous pouvez également utiliser le composable Card et définir la propriété d'élévation sur différentes valeurs par état.

Animer l'échelle, la translation ou la rotation du texte

Figure 9. Animation de texte fluide entre deux tailles

Lorsque vous animez une mise à l'échelle, une translation ou une rotation du texte, définissez le paramètre textMotion sur TextStyle sur TextMotion.Animated. Cela garantit des transitions plus fluides entre les animations de texte. Utilisez Modifier.graphicsLayer{ } pour traduire, faire pivoter ou mettre à l'échelle le texte.

val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val scale by infiniteTransition.animateFloat(
    initialValue = 1f,
    targetValue = 8f,
    animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
    label = "scale"
)
Box(modifier = Modifier.fillMaxSize()) {
    Text(
        text = "Hello",
        modifier = Modifier
            .graphicsLayer {
                scaleX = scale
                scaleY = scale
                transformOrigin = TransformOrigin.Center
            }
            .align(Alignment.Center),
        // Text composable does not take TextMotion as a parameter.
        // Provide it via style argument but make sure that we are copying from current theme
        style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated)
    )
}
AnimationQuickGuide.kt

Couleur du texte de l'animation

Figure 10 : Exemple d'animation de la couleur du texte

Pour animer la couleur du texte, utilisez le lambda color sur le composable BasicText :

val infiniteTransition = rememberInfiniteTransition(label = "infinite transition")
val animatedColor by infiniteTransition.animateColor(
    initialValue = Color(0xFF60DDAD),
    targetValue = Color(0xFF4285F4),
    animationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse),
    label = "color"
)

BasicText(
    text = "Hello Compose",
    color = {
        animatedColor
    },
    // ...
)
AnimationQuickGuide.kt

Passer d'un type de contenu à un autre

Figure 11 : Utilisation d'AnimatedContent pour animer les changements entre différents composables (ralentit)

Utilisez AnimatedContent pour animer différents composables. Si vous souhaitez simplement un fondu standard entre les composables, utilisez Crossfade.

var state by remember {
    mutableStateOf(UiState.Loading)
}
AnimatedContent(
    state,
    transitionSpec = {
        fadeIn(
            animationSpec = tween(3000)
        ) togetherWith fadeOut(animationSpec = tween(3000))
    },
    modifier = Modifier.clickable(
        interactionSource = remember { MutableInteractionSource() },
        indication = null
    ) {
        state = when (state) {
            UiState.Loading -> UiState.Loaded
            UiState.Loaded -> UiState.Error
            UiState.Error -> UiState.Loading
        }
    },
    label = "Animated Content"
) { targetState ->
    when (targetState) {
        UiState.Loading -> {
            LoadingScreen()
        }
        UiState.Loaded -> {
            LoadedScreen()
        }
        UiState.Error -> {
            ErrorScreen()
        }
    }
}
AnimationQuickGuide.kt

AnimatedContent peut être personnalisé pour afficher de nombreux types de transitions d'entrée et de sortie. Pour en savoir plus, consultez la documentation sur AnimatedContent ou lisez cet article de blog sur AnimatedContent.

Faire des animations lors de la navigation vers différentes destinations

Figure 12 : Animer des composables à l'aide de navigation-compose

Pour animer des transitions entre des composables lorsque vous utilisez l'artefact navigation-compose, spécifiez enterTransition et exitTransition sur un composable. Vous pouvez également définir l'animation par défaut à utiliser pour toutes les destinations au niveau supérieur NavHost :

val navController = rememberNavController()
NavHost(
    navController = navController, startDestination = "landing",
    enterTransition = { EnterTransition.None },
    exitTransition = { ExitTransition.None }
) {
    composable("landing") {
        ScreenLanding(
            // ...
        )
    }
    composable(
        "detail/{photoUrl}",
        arguments = listOf(navArgument("photoUrl") { type = NavType.StringType }),
        enterTransition = {
            fadeIn(
                animationSpec = tween(
                    300, easing = LinearEasing
                )
            ) + slideIntoContainer(
                animationSpec = tween(300, easing = EaseIn),
                towards = AnimatedContentTransitionScope.SlideDirection.Start
            )
        },
        exitTransition = {
            fadeOut(
                animationSpec = tween(
                    300, easing = LinearEasing
                )
            ) + slideOutOfContainer(
                animationSpec = tween(300, easing = EaseOut),
                towards = AnimatedContentTransitionScope.SlideDirection.End
            )
        }
    ) { backStackEntry ->
        ScreenDetails(
            // ...
        )
    }
}
AnimationQuickGuide.kt

Il existe de nombreux types de transitions d'entrée et de sortie qui appliquent différents effets au contenu entrant et sortant. Pour en savoir plus, consultez la documentation.

Remarque :Les transitions d'entrée et de sortie ne sont disponibles qu'à partir de la version 2.7.0-alpha01 de navigation-compose.

Répéter une animation

Figure 13. Animation de couleur d'arrière-plan entre deux valeurs, à l'infini

Utilisez rememberInfiniteTransition avec un infiniteRepeatable animationSpec pour répéter votre animation en continu. Modifiez RepeatModes pour spécifier le mode de transfert des données.

Utilisez finiteRepeatable pour répéter un nombre défini de fois.

val infiniteTransition = rememberInfiniteTransition(label = "infinite")
val color by infiniteTransition.animateColor(
    initialValue = Color.Green,
    targetValue = Color.Blue,
    animationSpec = infiniteRepeatable(
        animation = tween(1000, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    ),
    label = "color"
)
Column(
    modifier = Modifier.drawBehind {
        drawRect(color)
    }
) {
    // your composable here
}
AnimationQuickGuide.kt

Lancer une animation au lancement d'un composable

LaunchedEffect s'exécute lorsqu'un composable entre dans la composition. Elle lance une animation au lancement d'un composable. Vous pouvez l'utiliser pour modifier l'état de l'animation. Utilisez Animatable avec la méthode animateTo pour lancer l'animation au lancement:

val alphaAnimation = remember {
    Animatable(0f)
}
LaunchedEffect(Unit) {
    alphaAnimation.animateTo(1f)
}
Box(
    modifier = Modifier.graphicsLayer {
        alpha = alphaAnimation.value
    }
)
AnimationQuickGuide.kt

Attention :Soyez prudent lorsque vous utilisez LaunchedEffects dans des mises en page différées. Ils sont relancés lorsque les éléments entrent à nouveau dans la composition. Cela peut se produire lorsque vous faites défiler la liste hors de l'écran pour revenir à l'écran, par exemple. À la place, hissez votre état en dehors de la mise en page différée pour vous assurer que l'animation ne se produit pas pour chaque défilement vers et depuis la composition.

Créer des animations séquentielles

Figure 14. Schéma indiquant la progression d'une animation séquentielle.

Utilisez les API de coroutine Animatable pour effectuer des animations séquentielles ou simultanées. Si vous appelez animateTo l'une après l'autre sur Animatable, chaque animation attend la fin des animations précédentes avant de continuer . En effet, il s'agit d'une fonction de suspension.

val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }

LaunchedEffect("animationKey") {
    alphaAnimation.animateTo(1f)
    yAnimation.animateTo(100f)
    yAnimation.animateTo(500f, animationSpec = tween(100))
}
AnimationQuickGuide.kt

Créer des animations simultanées

Figure 15 : Schéma indiquant la progression des animations simultanées, toutes en même temps.

Utilisez les API de coroutine (Animatable#animateTo() ou animate) ou l'API Transition pour obtenir des animations simultanées. Si vous utilisez plusieurs fonctions de lancement dans un contexte de coroutine, les animations sont lancées en même temps :

val alphaAnimation = remember { Animatable(0f) }
val yAnimation = remember { Animatable(0f) }

LaunchedEffect("animationKey") {
    launch {
        alphaAnimation.animateTo(1f)
    }
    launch {
        yAnimation.animateTo(100f)
    }
}
AnimationQuickGuide.kt

Vous pouvez utiliser l'API updateTransition pour utiliser le même état afin de piloter simultanément de nombreuses animations de propriétés différentes. L'exemple ci-dessous anime deux propriétés contrôlées par un changement d'état, rect et borderWidth:

var currentState by remember { mutableStateOf(BoxState.Collapsed) }
val transition = updateTransition(currentState, label = "transition")

val rect by transition.animateRect(label = "rect") { state ->
    when (state) {
        BoxState.Collapsed -> Rect(0f, 0f, 100f, 100f)
        BoxState.Expanded -> Rect(100f, 100f, 300f, 300f)
    }
}
val borderWidth by transition.animateDp(label = "borderWidth") { state ->
    when (state) {
        BoxState.Collapsed -> 1.dp
        BoxState.Expanded -> 0.dp
    }
}
AnimationQuickGuide.kt

Optimiser les performances des animations

Les animations dans Compose peuvent entraîner des problèmes de performances. Cela est dû à la nature d'une animation: déplacement ou modification rapide des pixels à l'écran, image par image pour créer l'illusion du mouvement.

Examinez les différentes phases de Compose: composition, mise en page et dessin. Si votre animation modifie la phase de mise en page, tous les composables concernés doivent être remis en page et redessinés. Si votre animation se produit pendant la phase de dessin, elle est par défaut plus performante que si vous l'exécutez pendant la phase de mise en page, car elle nécessiterait moins de travail dans l'ensemble.

Pour que votre application fonctionne le moins possible lors de l'animation, choisissez la version lambda d'un Modifier dans la mesure du possible. Cela permet d'ignorer la recomposition et d'exécuter l'animation en dehors de la phase de composition. Sinon, utilisez Modifier.graphicsLayer{ }, car ce modificateur s'exécute toujours dans la phase de dessin. Pour en savoir plus à ce sujet, consultez la section Différer les lectures dans la documentation sur les performances.

Modifier la chronologie de l'animation

Par défaut, Compose utilise des animations printemps pour la plupart des animations. Les sources, ou animations basées sur la physique, sont plus naturelles. Ils sont également interrompus, car ils tiennent compte de la vitesse actuelle de l'objet, au lieu d'une durée fixe. Si vous souhaitez ignorer la valeur par défaut, toutes les API d'animation présentées ci-dessus peuvent définir un animationSpec pour personnaliser l'exécution d'une animation, que vous souhaitiez l'exécuter sur une certaine durée ou être plus dynamique.

Voici un résumé des différentes options animationSpec:

• spring: animation basée sur la physique, valeur par défaut pour toutes les animations. Vous pouvez modifier ces valeurs pour obtenir une apparence d'animation différente.
• tween (abréviation de between): animation basée sur la durée, qui s'anime entre deux valeurs à l'aide d'une fonction Easing.
• keyframes: spécification permettant de spécifier des valeurs à certains points clés d'une animation.
• repeatable: spécification basée sur la durée qui s'exécute un certain nombre de fois, spécifiée par RepeatMode.
• infiniteRepeatable: spécification basée sur la durée, qui s'exécute indéfiniment.
• snap: s'adapte instantanément à la valeur de fin, sans animation.

Figure 16. Aucune spécification définie, contrairement à l'ensemble de spécifications Spring personnalisées

Consultez la documentation complète pour en savoir plus sur animationSpecs.

Ressources supplémentaires

Pour voir d'autres exemples d'animations amusantes dans Compose, consultez les sections suivantes:

• Cinq animations rapides dans Compose
• Faire avancer une méduse dans Compose
• Personnaliser AnimatedContent dans Compose
• Accéder aux fonctions de lissage de vitesse dans Compose