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アップデートの一部として提供される新しいマテリアルシェイプを使用しています。

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.

カメラボタンを表示する作成画面と、カメラビューファインダーと関連ボタンを表示するカメラ画面の2つの画面があります。

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

現在、2つの画面間で遷移していますが、その間にきれいなアニメーションがありません。

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.

では、この美味しそうなクッキー型の「写真撮影」ボタンから、共有要素としてカメラ画面がとるフルスクリーンの四角形へと、クッキーが大きくなりながらカメラ画面をゆっくりと明らかにしていくような変形をしたい場合はどうすればよいでしょうか？

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.

このアニメーションを実現するには、3つのことを行う必要があります。共有要素を使用して写真ボタンからカメラ画面まで拡大する、ボタンが大きくなるにつれてカメラ画面を明らかにする、共有要素をモーフィングする形状にクリップする。

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のコンポジションローカルを設定しました。

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

次のステップは、アニメーション表示スコープがあることを確認することです。これは2つの画面間の遷移を駆動します。

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

このサンプルではNavigation 3を使用しており、必要に応じてアクセスできる組み込みのコンポジションローカルを提供しています。