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

Lorsque vous animez des é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 de manière fluide entre deux composables, il est recommandé de définir placeholderMemoryCacheKey() et memoryCacheKey() sur la même clé en tant que chaîne dérivée de la clé d'élément partagé, de sorte 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 fontSize, utilisez Modifier.sharedBounds(), resizeMode = ScaleToBounds(). Cette transition rend le changement de taille relativement fluide. Le paramètre contentScale peut être affiné pour animer un style ou une épaisseur 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 TextAlign ne sont pas animées par défaut. Utilisez plutôt Modifier.wrapContentSize() / Modifier.wrapContentWidth() au lieu d'utiliser différents TextAlign pour les transitions partagées.