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

Lorsque vous animez des éléments partagés, certains cas d'utilisation spécifiques nécessitent des recommandations particulières.

Images asynchrones

Il est courant d'utiliser une bibliothèque pour charger une image de manière asynchrone, par exemple en utilisant le composable AsyncImage de Coil. Pour qu'il 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é, de sorte que la clé du cache soit la même pour les éléments partagés correspondants. Le nouvel élément partagé utilisera le cache de son homologue comme espace réservé jusqu'à ce qu'il charge la nouvelle image.

Voici l'utilisation type de AsyncImage :

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 épaisseur ou un style de police spécifiques.

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 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.