Advanced shared elements with shape morphing | Jetpack Compose Tips

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

REBECCA FRANKS : Les utilisateurs adorent les écrans qui paraissent fluides et montrent une continuité entre les transitions.

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

Dans une vidéo précédente, on a couvert comment démarrer avec les bases des éléments partagés dans 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.

Dans cette astuce, on va couvrir un exemple d'application plus avancé des éléments partagés et comment tu peux aussi ajouter des moments de plaisir à ton app.

[MUSIC PLAYING]

[MUSIC PLAYING]

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

Dans Androidify, on utilise les nouvelles formes material qui font partie des mises à jour 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.

On a deux écrans : l'écran de Création qui montre le bouton caméra et l'écran Caméra qui montre le viseur et les boutons associés.

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

Actuellement, on fait la transition entre les deux écrans, mais on n'a pas une belle animation entre les deux.

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.

Et si on voulait transformer le bouton Take Photo, qui a cette forme de cookie délicieuse, en le carré plein écran de l'écran caméra en tant qu'élément partagé, le cookie révélant lentement l'écran caméra en grandissant et se transformant en rectangle ?

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.

On doit faire trois choses pour obtenir cette animation : utiliser les éléments partagés pour grandir du bouton Photo à l'écran caméra ; révéler l'écran caméra pendant que le bouton grandit ; et clipper l'élément partagé sur la forme qui se transforme.

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

Pour l'étape 1, on utilise le même concept montré dans la vidéo sur les éléments partagés liée ci-dessous.

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

D'abord, on doit s'assurer qu'au niveau supérieur de notre app, on utilise un SharedTransitionLayout.

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

On a placé notre SharedTransitionLayout au niveau supérieur du thème pour l'utiliser dans toute l'app Androidify.

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

On définit aussi un composition local pour le SharedTransitionScope afin de ne pas avoir à passer le scope partout.

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

L'étape suivante est de s'assurer qu'on a un animated visibility scope, qui pilote la transition entre les deux écrans.

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

On utilise Navigation 3 dans cet exemple, qui fournit un composition local intégré accessible quand tu en as besoin.