Casos de uso comunes de elementos compartidos

Cuando se animan elementos compartidos, hay algunos casos de uso particulares que tienen 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 como marcador de posición 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
        )
)
SharedElementCommonUseCaseSnippets.kt

Texto

Para animar los cambios de fontSize, usa Modifier.sharedBounds() y resizeMode = ScaleToBounds(). Esta transición hace que el tamaño cambie de forma relativamente fluida. El parámetro contentScale se puede ajustar para animar 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()
        )
)
SharedElementCommonUseCaseSnippets.kt

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.