Advanced shared elements with shape morphing | Jetpack Compose Tips

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

ربکا فرانک: کاربرها صفحه‌هایی رو دوست دارن که روان باشن و پیوستگی بین انتقال‌ها رو نشون بدن.

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 هستن، استفاده می‌کنیم.

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.

پس برای مرحله ۱، از همون مفهومی که در ویدیوی عناصر مشترک که در زیر لینک شده، استفاده می‌کنیم.

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.

SharedTransitionLayout رو در بالاترین سطح تم‌مون قرار دادیم تا در کل اپلیکیشن Androidify ازش استفاده کنیم.

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.

قدم بعدی اینه که مطمئن بشیم یه 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 استفاده می‌کنیم که یه کامپوزیشن لوکال داخلی رو فراهم می‌کنه که می‌تونید هر وقت نیاز داشتید بهش دسترسی پیدا کنید.