Casi d'uso comuni degli elementi condivisi

Quando animiamo gli elementi condivisi, esistono alcuni casi d'uso particolari che richiedono consigli specifici.

Immagini asincrone

È comune utilizzare una libreria per caricare un'immagine in modo asincrono, ad esempio quando si utilizza il composito AsyncImage di Coil. Affinché funzionino perfettamente tra due composabili, è consigliabile impostare placeholderMemoryCacheKey() e memoryCacheKey() sulla stessa chiave come stringa derivante 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 caricherà 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(), resizeMode = ScaleToBounds(). Questa transizione rende la variazione delle dimensioni relativamente fluida. Il parametro contentScale può essere modificato per animare un carattere o uno stile 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 TextAlign non sono animate per impostazione predefinita. Utilizza invece Modifier.wrapContentSize() / Modifier.wrapContentWidth() anziché diversi TextAlign per le transizioni condivise.