Advanced shared elements with shape morphing | Jetpack Compose Tips

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

REBECCA FRANKS: Nutzer lieben Bildschirme, die sich fluessig anfuehlen und Kontinuitaet zwischen Uebergaengen zeigen.

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

In einem frueheren Video haben wir die Grundlagen der gemeinsam genutzten Elemente in Jetpack Compose behandelt.

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.

In diesem Tipp werden wir ein fortgeschritteneres Anwendungsbeispiel fuer gemeinsam genutzte Elemente behandeln und wie du deiner App auch Momente der Freude hinzufuegen kannst.

[MUSIC PLAYING]

[MUSIC PLAYING]

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

In Androidify verwenden wir die neuen Material-Formen, die als Teil der Material 3 Expressive-Updates verfuegbar sind.

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.

Wir haben zwei Bildschirme: den Erstellungsbildschirm, der die Kamera-Schaltflaeche zeigt, und den Kamerabildschirm, der den Kamerasucher und die zugehoerigen Schaltflaechen zeigt.

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

Derzeit wechseln wir zwischen den beiden Bildschirmen, aber wir haben noch keine schoene Animation zwischen den beiden.

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.

Was waere, wenn wir den Foto-aufnehmen-Button, der diese koestliche Keksform hat, in das Vollbildquadrat des Kamerabildschirms verwandeln wollten, als gemeinsam genutztes Element, wobei der Keks den Kamerabildschirm langsam enthuellet, waehrend er groesser wird und sich in die Rechteckform des Bildschirms verwandelt.

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.

Wir muessen drei Dinge tun, um diese Animation zu erreichen -- gemeinsam genutzte Elemente verwenden, um vom Foto-Button zum Kamerabildschirm zu wachsen; den Kamerabildschirm enthullen, waehrend der Button groesser wird; und das gemeinsam genutzte Element auf die sich veraendernde Form zuschneiden.

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

Fuer Schritt 1 verwenden wir dasselbe Konzept, das im unten verlinkten Video zu gemeinsam genutzten Elementen gezeigt wird.

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

Zunaechst muessen wir sicherstellen, dass wir auf der obersten Ebene unserer App ein SharedTransitionLayout verwenden.

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

Wir haben unser SharedTransitionLayout auf der obersten Ebene des Themes platziert, um es in der gesamten Androidify-App nutzen zu koennen.

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

Wir setzen ausserdem ein Composition Local fuer den SharedTransitionScope, damit wir den Scope nicht ueberall weitergeben muessen.

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

Der naechste Schritt besteht darin, sicherzustellen, dass wir einen Animated Visibility Scope haben, der den Uebergang zwischen den beiden Bildschirmen steuert.

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

Wir verwenden in diesem Beispiel Navigation 3, das ein eingebautes Composition Local bereitstellt, auf das du bei Bedarf zugreifen kannst.