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 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.

لدينا شاشتان، شاشة الإنشاء التي تعرض زر الكاميرا وشاشة الكاميرا التي تعرض عدسة الكاميرا وزرارها ذات الصلة.

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.

إذن ماذا لو أردنا التحول بين زر التقاط الصورة، وهو شكل الكعكة اللذيذ هذا، إلى المربع كامل الشاشة الذي تتخذه شاشة الكاميرا كعنصر مشترك، مع الكعكة تكشف ببطء عن شاشة الكاميرا مع نموها في الحجم وتحولها إلى شكل مستطيل الشاشة.

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.

الخطوة التالية هي التأكد من أن لدينا نطاق رؤية متحركة، والذي يدفع الانتقال بين الشاشتين.

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

نحن نستخدم Navigation 3 في هذه العينة، والتي توفر نطاق تكوين محلي مدمج يمكنك الوصول إليه عند الحاجة.