Casi d'uso comuni degli elementi condivisi

Quando si animano elementi condivisi, esistono alcuni casi d'uso particolari per i quali sono disponibili consigli specifici.

Immagini asincrone

È pratica comune utilizzare una libreria per caricare un'immagine in modo asincrono, ad esempio quando si utilizza il composable Coil's AsyncImage. Per un funzionamento ottimale tra due composable, è consigliabile impostare placeholderMemoryCacheKey() e memoryCacheKey() sulla stessa chiave come stringa derivata dalla chiave dell'elemento condiviso, in modo che la chiave della cache sia la stessa per gli elementi condivisi corrispondenti. Il nuovo elemento condiviso utilizzerà la cache della corrispondenza come segnaposto finché non verrà caricata la nuova immagine.

L'utilizzo tipico di AsyncImage è il seguente:

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

Testo

Per animare le modifiche di fontSize, utilizza Modifier.sharedBounds() e resizeMode = ScaleToBounds(). Questa transizione rende il cambio di dimensione relativamente fluido. Il parametro contentScale può essere modificato per animare un peso o uno stile di carattere specifico.

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

Le modifiche di TextAlign non vengono animate per impostazione predefinita. Utilizza invece Modifier.wrapContentSize() o Modifier.wrapContentWidth() anziché TextAlign diversi per le transizioni condivise.