L'animazione di elementi condivisi include alcuni casi d'uso particolari con suggerimenti specifici.
Immagini asincrone
È pratica comune utilizzare una libreria per caricare un'immagine in modo asincrono, ad esempio quando si utilizza l'elemento componibile AsyncImage di Coil.
Affinché funzioni senza problemi tra due elementi componibili, si consiglia di impostare placeholderMemoryCacheKey() e memoryCacheKey() sulla stessa chiave di una stringa derivata dalla chiave dell'elemento condiviso, in modo che la chiave cache sia la stessa per gli elementi condivisi corrispondenti. Il nuovo elemento condiviso utilizzerà la cache della corrispondenza come segnaposto fino a quando 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
)
)
Testo
Per animare le modifiche di fontSize, usa Modifier.sharedBounds() e resizeMode =
ScaleToBounds(). Questa transizione rende il cambiamento
di dimensioni relativamente fluido. Il parametro contentScale può essere modificato per animare uno stile o uno spessore specifico del carattere.
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()
)
)
Le modifiche a TextAlign non sono animate per impostazione predefinita. Usa invece Modifier.wrapContentSize() / Modifier.wrapContentWidth() anziché TextAlign diversi per le transizioni condivise.