Casos de uso comunes de elementos compartidos

Cuando se animan elementos compartidos, hay algunos casos de uso particulares con 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 que 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(), resizeMode = ScaleToBounds(). Esta transición hace que el cambio de tamaño sea relativamente fluido. Se puede modificar el parámetro contentScale 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 están animados de forma predeterminada. En su lugar, usa Modifier.wrapContentSize() / Modifier.wrapContentWidth() en lugar de usar TextAlign diferentes para las transiciones compartidas.