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]

[MUSIC PLAYING]

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

Androidify में, हम नए मटेरियल शेप्स का उपयोग कर रहे हैं जो मटेरियल 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.

हमारे पास दो स्क्रीन हैं, क्रिएशन स्क्रीन जो कैमरा बटन दिखाती है और कैमरा स्क्रीन जो कैमरा व्यूफ़ाइंडर और संबंधित बटन दिखाती है।

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.

तो स्टेप 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.

हमने अपने 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 का उपयोग कर रहे हैं, जो एक बिल्ट-इन कंपोज़िशन लोकल प्रदान करता है जिसे तुम ज़रूरत पड़ने पर एक्सेस कर सकते हो।