Advanced shared elements with shape morphing | Jetpack Compose Tips

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

REBECCA FRANKS: 사용자들은 부드럽게 느껴지고 전환 간의 연속성을 보여주는 화면을 좋아해요.

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

이전 영상에서는 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.

이번 팁에서는 공유 요소의 좀 더 고급 예제 애플리케이션과 앱에 즐거움을 더할 수 있는 방법에 대해 다룰 거예요.

[MUSIC PLAYING]

[음악 재생 중]

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

Androidify에서는 Material 3 Expressive 업데이트의 일부로 제공되는 새로운 Material Shape를 사용하고 있어요.

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.

카메라 버튼을 보여주는 Creation 화면과 카메라 뷰파인더와 관련 버튼을 보여주는 Camera 화면, 이렇게 두 개의 화면이 있어요.

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

현재 두 화면 간의 전환은 이루어졌지만, 그 사이에 멋진 애니메이션은 없어요.

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.

그렇다면 이 맛있는 쿠키 모양의 Take Photo 버튼이 공유 요소로 사용되는 전체 화면 사각형으로 변환되도록 하고 싶다면 어떻게 해야 할까요? 쿠키가 커지면서 화면의 사각형 모양으로 변환되면서 카메라 화면을 서서히 드러내는 식으로요.

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.

이 애니메이션을 구현하려면 세 가지를 해야 해요. 공유 요소를 사용하여 사진 버튼에서 카메라 화면으로 커지게 하고, 버튼이 커질 때 카메라 화면을 드러내고, 공유 요소를 변형되는 모양으로 클리핑해야 해요.

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

그래서 1단계에서는 아래 링크된 공유 요소 영상에서 보여준 것과 같은 개념을 사용해요.

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

먼저, 앱의 최상위 레벨에서 SharedTransitionLayout을 사용하고 있는지 확인해야 해요.

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

Androidify 앱 전체에서 사용할 수 있도록 테마의 최상위 레벨에 SharedTransitionLayout을 배치했어요.

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

또한 SharedTransitionScope에 대한 composition local을 설정해서 스코프를 전달할 필요가 없도록 했어요.

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

다음 단계는 두 화면 간의 전환을 구동하는 animated visibility scope가 있는지 확인하는 거예요.

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

이 샘플에서는 Navigation 3을 사용하고 있는데, 필요할 때 접근할 수 있는 내장 composition local을 제공해요.