Cas d'utilisation courants des éléments partagés

Lors de l'animation d'éléments partagés, certains cas d'utilisation particuliers nécessitent des recommandations spécifiques.

Images asynchrones

Il est courant d'utiliser une bibliothèque pour charger une image de manière asynchrone, par exemple lorsque vous utilisez le composable AsyncImage de Coil. Pour qu'il fonctionne parfaitement entre deux composables, il est recommandé de définir placeholderMemoryCacheKey() et memoryCacheKey() sur la même clé qu'une chaîne dérivée de la clé de l'élément partagé, de sorte que la clé de cache soit identique pour les éléments partagés correspondants. Le nouvel élément partagé utilisera le cache de sa correspondance comme espace réservé jusqu'à ce qu'il charge la nouvelle image.

En général, AsyncImage est utilisé comme suit:

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("your-image-url")
        .crossfade(true)
        .placeholderMemoryCacheKey("image-key") //  same key as shared element key
        .memoryCacheKey("image-key") // same key as shared element key
        .build(),
    placeholder = null,
    contentDescription = null,
    modifier = Modifier
        .size(120.dp)
        .sharedBounds(
            rememberSharedContentState(
                key = "image-key"
            ),
            animatedVisibilityScope = this
        )
)
SharedElementCommonUseCaseSnippets.kt

Texte

Pour animer les modifications de fontSize, utilisez Modifier.sharedBounds() et resizeMode = ScaleToBounds(). Cette transition rend le changement de taille relativement fluide. Le paramètre contentScale peut être modifié pour animer une épaisseur ou un style de police spécifique.

Text(
    text = "This is an example of how to share text",
    modifier = Modifier
        .wrapContentWidth()
        .sharedBounds(
            rememberSharedContentState(
                key = "shared Text"
            ),
            animatedVisibilityScope = this,
            enter = fadeIn(),
            exit = fadeOut(),
            resizeMode = SharedTransitionScope.ResizeMode.ScaleToBounds()
        )
)
SharedElementCommonUseCaseSnippets.kt

Les modifications de TextAlign ne sont pas animées par défaut. Utilisez plutôt Modifier.wrapContentSize() / Modifier.wrapContentWidth() plutôt que des TextAlign différents pour les transitions partagées.