Advanced shared elements with shape morphing | Jetpack Compose Tips

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

REBECCA FRANKS: A los usuarios les encantan las pantallas que se sienten fluidas y muestran continuidad entre transiciones.

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

En un video anterior, cubrimos cómo empezar con los conceptos básicos de elementos compartidos en 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.

En este consejo, cubriremos un ejemplo más avanzado de elementos compartidos y cómo también puedes agregar momentos de deleite a tu app.

[MUSIC PLAYING]

[MUSIC PLAYING]

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

En Androidify, estamos usando las nuevas formas de material que vienen como parte de las actualizaciones de Material 3 Expressive.

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.

Tenemos dos pantallas, la pantalla de Creación que muestra el botón de cámara y la pantalla de Cámara que muestra el visor y los botones relacionados.

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

Actualmente, hacemos transición entre las dos pantallas, pero no tenemos una animación agradable entre ellas.

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.

¿Y si quisiéramos transformar el botón Tomar Foto, que tiene esta deliciosa forma de galleta, a la pantalla completa cuadrada que toma la pantalla de cámara como elemento compartido, revelando lentamente la cámara mientras crece y se transforma a la forma rectangular de la pantalla?

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.

Necesitamos hacer tres cosas para lograr esta animación: usar elementos compartidos para crecer desde el botón de Foto hasta la pantalla de cámara; revelar la pantalla de cámara mientras el botón crece; y recortar el elemento compartido a la forma que se transforma.

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

Para el paso 1, usamos el mismo concepto mostrado en el video de elementos compartidos que está enlazado abajo.

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

Primero, necesitamos asegurarnos de que en el nivel superior de nuestra app estemos usando un SharedTransitionLayout.

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

Colocamos nuestro SharedTransitionLayout en el nivel superior del tema para poder usarlo en toda la app de Androidify.

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

También establecemos un composition local para el SharedTransitionScope para no tener que pasar el scope por todos lados.

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

El siguiente paso es asegurarnos de tener un animated visibility scope, que impulsa la transición entre las dos pantallas.

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

Estamos usando Navigation 3 en este ejemplo, que proporciona un composition local incorporado al que puedes acceder cuando lo necesites.