Advanced shared elements with shape morphing | Jetpack Compose Tips

REBECCA FRANKS: Users love screens that feel fluid and show continuity between transitions.

REBECCA FRANKS: Os usuários adoram telas que parecem fluidas e mostram continuidade entre as transições.

In a previous video, we covered how to get started with the basics of shared elements in Jetpack Compose.

Em um vídeo anterior, cobrimos como começar com os conceitos básicos de elementos compartilhados no Jetpack Compose.

In this tip, we will cover a more advanced example application of shared elements and how you can also add moments of delight to your app.

Nesta dica, abordaremos um exemplo de aplicação mais avançado de elementos compartilhados e como você também pode adicionar momentos de deleite ao seu aplicativo.

[MUSIC PLAYING]

[MÚSICA TOCANDO]

In Androidify, we are using the new material shapes that come as part of the Material 3 Expressive updates.

No Androidify, estamos usando as novas formas de material que vêm como parte das atualizações Expressivas do Material 3.

We have two screens, the Creation screen that shows the camera button and the Camera screen that shows the camera viewfinder and the related buttons.

Temos duas telas, a tela de Criação que mostra o botão da câmera e a tela da Câmera que mostra o visor da câmera e os botões relacionados.

Currently, we've transitioned between the two screens, but we don't have a nice animation between the two.

Atualmente, fizemos a transição entre as duas telas, mas não temos uma animação legal entre elas.

So what if we wanted to transform between the Take Photo button, which is this delicious cookie shape, to the full-screen square that the camera screen takes on as a shared element, slowly having the cookie reveal the camera screen as it grows in size and transforms to the screen's rectangle shape.

Então, e se quiséssemos transformar o botão Tirar Foto, que é essa forma deliciosa de biscoito, para o quadrado em tela cheia que a tela da câmera assume como um elemento compartilhado, lentamente fazendo o biscoito revelar a tela da câmera enquanto cresce em tamanho e se transforma na forma retangular da tela.

We need to do three things to achieve this animation-- use shared elements to grow from the Photo button to the camera screen; reveal the camera screen as the button grows in size; and clip the shared element to the morphing shape.

Precisamos fazer três coisas para alcançar essa animação - usar elementos compartilhados para crescer do botão Foto para a tela da câmera; revelar a tela da câmera à medida que o botão cresce em tamanho; e recortar o elemento compartilhado para a forma que se transforma.

So for step 1, we use the same concept shown in the shared element video that's linked below.

Então, para o passo 1, usamos o mesmo conceito mostrado no vídeo de elementos compartilhados, que está linkado abaixo.

Firstly, we need to make sure that the top level of our app we are using a SharedTransitionLayout.

Primeiramente, precisamos garantir que no nível superior do nosso aplicativo estamos usando um SharedTransitionLayout.

We've placed our SharedTransitionLayout at our top level of the theme in order to use it all throughout the Androidify app.

Colocamos nosso SharedTransitionLayout no nível superior do tema para poder usá-lo em todo o aplicativo Androidify.

We also set a composition local for the SharedTransitionScope so that we don't need to pass the scope around.

Também definimos um local de composição para o SharedTransitionScope para que não precisemos passar o escopo por aí.

The next step is to ensure that we have an animated visibility scope, which drives the transition between the two screens.

O próximo passo é garantir que temos um escopo de visibilidade animada, que impulsiona a transição entre as duas telas.

We are using Navigation 3 in this sample, which provides a built-in composition local where you can access when needed.

Estamos usando o Navigation 3 neste exemplo, que fornece um local de composição integrado onde você pode acessar quando necessário.