Casos de uso comuns de elementos compartilhados

Ao animar elementos compartilhados, há alguns casos de uso que têm recomendações específicas.

Imagens assíncronas

É comum usar uma biblioteca para carregar uma imagem de forma assíncrona, como ao usar o elemento combinável AsyncImage da Coil (link em inglês). Para que ela funcione perfeitamente entre dois elementos combináveis, é recomendável definir placeholderMemoryCacheKey() e memoryCacheKey() como a mesma chave que uma string derivada da chave de elemento compartilhado, de modo que a chave de cache seja a mesma para os elementos compartilhados correspondentes. O novo elemento compartilhado usará o cache da correspondência como marcador de posição até carregar a nova imagem.

O uso típico de AsyncImage é o seguinte:

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 as mudanças de fontSize, use Modifier.sharedBounds(), resizeMode = ScaleToBounds(). Essa transição torna a mudança de tamanho relativamente fluida. O parâmetro contentScale pode ser ajustado para animar uma espessura ou estilo de fonte 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

As mudanças em TextAlign não são animadas por padrão. Em vez disso, use Modifier.wrapContentSize() / Modifier.wrapContentWidth() em vez de TextAlign diferentes para transições compartilhadas.