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

Lors de l'animation d'éléments partagés, certains cas d'utilisation particuliers font l'objet de 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 que cela fonctionne de manière fluide 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é, afin que la clé de cache soit la même 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.

L'utilisation typique de AsyncImage est la suivante :

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(), resizeMode = ScaleToBounds(). Cette transition rend le changement de taille relativement fluide. Le paramètre contentScale peut être ajusté pour animer une graisse 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() ou Modifier.wrapContentWidth() au lieu d'utiliser différents TextAlign pour les transitions partagées.