Personalizar a transição de elementos compartilhados

Para personalizar a execução da animação de transição de elementos compartilhados, há alguns parâmetros que podem ser usados para mudar a transição dos elementos compartilhados.

Especificação de animação

Para mudar a especificação de animação usada para o movimento de tamanho e posição, especifique um parâmetro boundsTransform diferente em Modifier.sharedElement(). Isso fornece a posição inicial Rect e a posição de destino Rect.

Por exemplo, para fazer com que o texto no exemplo anterior se mova com um movimento de arco, especifique o parâmetro boundsTransform para usar uma especificação keyframes:

val textBoundsTransform = BoundsTransform { initialBounds, targetBounds ->
    keyframes {
        durationMillis = boundsAnimationDurationMillis
        initialBounds at 0 using ArcMode.ArcBelow using FastOutSlowInEasing
        targetBounds at boundsAnimationDurationMillis
    }
}
Text(
    "Cupcake", fontSize = 28.sp,
    modifier = Modifier.sharedBounds(
        rememberSharedContentState(key = "title"),
        animatedVisibilityScope = animatedVisibilityScope,
        boundsTransform = textBoundsTransform
    )
)
CustomizeSharedElementsSnippets.kt

Você pode usar qualquer AnimationSpec. Este exemplo usa uma especificação keyframes.

Figura 1. Exemplo mostrando diferentes parâmetros boundsTransform

Modo de redimensionamento

Ao animar entre dois limites compartilhados, é possível definir o parâmetro resizeMode como RemeasureToBounds ou ScaleToBounds. Esse parâmetro determina como o elemento compartilhado faz a transição entre os dois estados. O ScaleToBounds primeiro mede o layout filho com as restrições de previsão (ou de destino). Em seguida, o layout estável da filha é dimensionado para caber nos limites compartilhados. ScaleToBounds pode ser considerado uma "escala gráfica" entre os estados.

Por outro lado, RemeasureToBounds reavalia e reorganiza o layout filho de sharedBounds com restrições fixas animadas com base no tamanho de destino. A reavaliação é acionada pela mudança de tamanho dos limites, que pode ser em todos os frames.

Para elementos combináveis Text, o ScaleToBounds é recomendado, porque evita o redimensionamento e o fluxo de texto em linhas diferentes. O RemeasureToBounds é recomendado para limites com proporções diferentes e se você quiser uma continuidade fluida entre os dois elementos compartilhados.

A diferença entre os dois modos de redimensionamento pode ser vista nos exemplos a seguir:

ScaleToBounds	RemeasureToBounds

Pular para o layout final

Por padrão, ao fazer a transição entre dois layouts, o tamanho do layout é animado entre o estado inicial e o final. Esse pode ser um comportamento indesejável ao animar conteúdo, como texto.

O exemplo a seguir ilustra o texto de descrição "Lorem Ipsum" entrando na tela de duas maneiras diferentes. No primeiro exemplo, o texto é reflowado à medida que entra à medida que o contêiner cresce. No segundo exemplo, o texto não é redimensionado à medida que cresce. Adicionar Modifier.skipToLookaheadSize() evita o refluxo à medida que ele cresce.

Não Modifier.skipToLookahead(): observe o fluxo do texto "Lorem Ipsum"	Modifier.skipToLookahead(): observe que o texto "Lorem Ipsum" mantém o estado final no início da animação.

Clipes e sobreposições

Para que os elementos compartilhados sejam compartilhados entre diferentes elementos combináveis, a renderização do elemento combinável é elevada para uma sobreposição de camada quando a transição é iniciada para a correspondência no destino. O efeito disso é que ele vai escapar dos limites da camada pai e das transformações de camada (por exemplo, alfa e escala).

Ele será renderizado sobre outros elementos de interface não compartilhados. Quando a transição for concluída, o elemento será descartado da sobreposição para o próprio DrawScope.

Importante: para evitar que o elemento compartilhado apareça ou desapareça com os pais durante a transição para o estado de destino, o elemento compartilhado é renderizado na sobreposição SharedTransitionScope quando uma correspondência é encontrada.

Para recortar um elemento compartilhado em uma forma, use a função Modifier.clip() padrão. Coloque-o depois de sharedElement():

Image(
    painter = painterResource(id = R.drawable.cupcake),
    contentDescription = "Cupcake",
    modifier = Modifier
        .size(100.dp)
        .sharedElement(
            rememberSharedContentState(key = "image"),
            animatedVisibilityScope = this@AnimatedContent
        )
        .clip(RoundedCornerShape(16.dp)),
    contentScale = ContentScale.Crop
)
CustomizeSharedElementsSnippets.kt

Se você precisar garantir que um elemento compartilhado nunca seja renderizado fora de um contêiner pai, defina clipInOverlayDuringTransition em sharedElement(). Por padrão, para limites compartilhados aninhados, clipInOverlayDuringTransition usa o caminho de clipe do sharedBounds() pai.

Para manter elementos específicos da interface, como uma barra inferior ou um botão de ação flutuante, sempre na parte de cima durante uma transição de elemento compartilhado, use Modifier.renderInSharedTransitionScopeOverlay(). Por padrão, esse modificador mantém o conteúdo na sobreposição enquanto a transição compartilhada está ativa.

Por exemplo, no Jetsnack, o BottomAppBar precisa ser colocado por cima do elemento compartilhado até que a tela não esteja visível. Adicionar o modificador ao elemento combinável o mantém elevado.

Sem Modifier.renderInSharedTransitionScopeOverlay()	Com Modifier.renderInSharedTransitionScopeOverlay()

Talvez você queira que o elemento combinável não compartilhado seja animado e permaneça na parte de cima dos outros elementos combináveis antes da transição. Nesses casos, use renderInSharedTransitionScopeOverlay().animateEnterExit() para animar o combinável conforme a transição de elemento compartilhado é executada:

JetsnackBottomBar(
    modifier = Modifier
        .renderInSharedTransitionScopeOverlay(
            zIndexInOverlay = 1f,
        )
        .animateEnterExit(
            enter = fadeIn() + slideInVertically {
                it
            },
            exit = fadeOut() + slideOutVertically {
                it
            }
        )
)
CustomizeSharedElementsSnippets.kt

Figura 2. A barra de apps inferior desliza para dentro e para fora conforme a animação faz a transição.

No caso raro em que você quer que o elemento compartilhado não seja renderizado em uma sobreposição, defina renderInOverlayDuringTransition em sharedElement() como falso.

Notificar layouts irmãos sobre mudanças no tamanho do elemento compartilhado

Por padrão, sharedBounds() e sharedElement() não notificam o contêiner pai sobre nenhuma mudança de tamanho à medida que o layout transita.

Para propagar as mudanças de tamanho para o contêiner pai durante a transição, mude o parâmetro placeHolderSize para PlaceHolderSize.animatedSize. Isso faz com que o item aumente ou diminua. Todos os outros itens no layout respondem à mudança.

PlaceholderSize.contentSize (padrão)	PlaceholderSize.animatedSize Observe como os outros itens da lista são movidos para baixo em resposta ao crescimento de um item.