Cuando se animan elementos compartidos, hay algunos casos de uso particulares recomendaciones específicas.
Imágenes asíncronas
Es común usar una biblioteca para cargar una imagen de forma asíncrona, como cuando se usa el elemento componible AsyncImage
de Coil.
Para que funcione sin problemas entre dos elementos componibles, se recomienda establecer placeholderMemoryCacheKey()
y memoryCacheKey()
en la misma clave como una cadena derivada de la clave del elemento compartido, de modo que la clave de caché sea la misma para los elementos compartidos coincidentes. El nuevo elemento compartido usará la caché de su coincidencia
hasta que cargue la imagen nueva.
El uso típico de AsyncImage
es el siguiente:
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 ) )
Texto
Para animar los cambios de fontSize
, usa Modifier.sharedBounds()
y resizeMode =
ScaleToBounds()
. Esta transición hace que el tamaño
cambian relativamente fluidos. Se puede modificar el parámetro contentScale
para animarlo
un grosor o estilo de fuente específico.
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() ) )
Los cambios de TextAlign
no se animan de forma predeterminada. En su lugar, usa Modifier.wrapContentSize() / Modifier.wrapContentWidth()
en lugar de usar diferentes TextAlign
para transiciones compartidas.