MotionLayout के उदाहरण

'लिखें' सुविधा आज़माएं
Android के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर सुझाया जाता है. Compose में ऐनिमेशन इस्तेमाल करने का तरीका जानें.

इस दस्तावेज़ में, MotionLayout का इस्तेमाल करने के उदाहरण दिए गए हैं. हर उदाहरण में, मोशन दिखाने वाला वीडियो शामिल होता है. साथ ही, मोशन सीन और लेआउट के लिए कोड भी होता है.

बुनियादी मोशन

इस उदाहरण में एक व्यू है, जिसे टच करके खींचकर, हॉरिज़ॉन्टल तौर पर घुमाया जा सकता है.

पहली इमेज. किसी व्यू को खींचकर छोड़ना.

कस्टम एट्रिब्यूट - backgroundColor

यह उदाहरण, बेसिक मोशन के उदाहरण से मिलता-जुलता है. बुनियादी मोशन के अलावा, व्यू के आगे-पीछे होने पर, व्यू के बैकग्राउंड का रंग भी बदलता है.

दूसरी इमेज. किसी व्यू को खींचते समय, उसका बैकग्राउंड का रंग बदलना.

ImageFilterView - इमेज ट्रांज़िशन

इस उदाहरण में, किसी ImageFilterView की संतृप्ति वैल्यू को ट्रांज़िशन करने का तरीका बताया गया है.

तीसरी इमेज. इमेज को खींचते और छोड़ते समय, उसका संतृप्ति बदलना.

मुख्य-फ़्रेम की पोज़िशन

इस उदाहरण में, <KeyFrameSet> का इस्तेमाल करके, ऐक्शन के दौरान व्यू की Y पोज़िशन बदली गई है.

चौथी इमेज. किसी व्यू को खींचकर, उसकी Y पोज़िशन में बदलाव करना.

मुख्य-फ़्रेम इंटरपोलेशन

यह उदाहरण, कीफ़्रेम की पोज़िशन के उदाहरण पर आधारित है. इसमें व्यू ट्रांज़िशन में रोटेशन और स्केलिंग जोड़ी गई है.

पांचवीं इमेज. किसी व्यू को खींचकर, उसकी Y पोज़िशन, रोटेशन, और स्केल में बदलाव करना.

कीफ़्रेम साइकल

इस उदाहरण में, व्यू में लहर जैसी मोशन जोड़ने के लिए <KeyCycle> एलिमेंट जोड़े गए हैं.

छठी इमेज. किसी व्यू का रंग बदलते समय, उसे लहर की तरह खींचकर लाने और ले जाने की सुविधा.

CoordinatorLayout (1/2)

इस उदाहरण में, ऐप्लिकेशन बार में मोशन जोड़ने के लिए, किसी मौजूदा AppBarLayout में MotionLayout जोड़ा गया है. इस उदाहरण के बारे में ज़्यादा जानकारी, MotionLayout के बारे में जानकारी (तीसरा भाग) में दी गई है.

सातवीं इमेज. ऐप्लिकेशन बार के बड़े होने के दौरान कॉन्टेंट को स्क्रोल करना.

CoordinatorLayout (2/2)

इस उदाहरण में, ऐप्लिकेशन बार में मोशन जोड़ने के लिए, किसी मौजूदा AppBarLayout में MotionLayout जोड़ा गया है.

आठवां डायग्राम. ऐप्लिकेशन बार के बड़े होने और ऐप्लिकेशन बार में टेक्स्ट के ऐनिमेशन के दौरान, कॉन्टेंट को स्क्रोल करना.

DrawerLayout (1/2)

इस उदाहरण में, DrawerLayout में मोशन जोड़ने का तरीका बताया गया है. इस उदाहरण के बारे में ज़्यादा जानकारी, MotionLayout के बारे में जानकारी (तीसरा भाग) में दी गई है.

नौवीं इमेज. `DrawerLayout` को बड़ा करना.

DrawerLayout (2/2)

इस उदाहरण में, DrawerLayout में मोशन जोड़ने का तरीका बताया गया है.

10वीं इमेज. ऐनिमेशन वाले मेन्यू टेक्स्ट की मदद से, `DrawerLayout` को बड़ा करना.

साइड पैनल

इस उदाहरण में, मुख्य कॉन्टेंट वाले हिस्से को दाईं ओर खींचते समय साइड पैनल दिखाने का तरीका बताया गया है.

11वां डायग्राम. मुख्य कॉन्टेंट को खींचकर साइड पैनल दिखाना.

पैरालैक्स

इस उदाहरण में पैरलॅक्स बैकग्राउंड दिखाया गया है, जिसमें बैकग्राउंड की अलग-अलग लेयर अलग-अलग स्पीड से मूव करती हैं.

12वां डायग्राम. हेडर इमेज में पैरालैक्स इफ़ेक्ट.

ViewPager

इस उदाहरण में बताया गया है कि ViewPager टैब के बीच स्वाइप करते समय, मोशन कैसे जोड़ा जा सकता है. इस उदाहरण के बारे में ज़्यादा जानकारी, MotionLayout के बारे में जानकारी (तीसरा भाग) में दी गई है.

13वीं इमेज. `ViewPager` को स्वाइप करते समय, हेडर इमेज में पैरालैक्स इफ़ेक्ट.

ViewPager - Lottie

इस उदाहरण में बताया गया है कि ViewPager टैब के बीच स्वाइप करते समय, मोशन कैसे जोड़ा जा सकता है.

14वां डायग्राम. `ViewPager` को स्वाइप करते समय, हेडर इमेज में Lottie इफ़ेक्ट दिखाने वाली इमेज.

जटिल मोशन (1/3)

इस उदाहरण में, पिछले उदाहरणों के एलिमेंट को मिलाकर जटिल ऐक्शन दिखाया गया है.

15वीं इमेज. जटिल मोशन बनाने के लिए, इफ़ेक्ट को एक साथ इस्तेमाल करना.

कॉम्प्लेक्स मोशन (2/3)

इस उदाहरण में, पिछले उदाहरणों के एलिमेंट को मिलाकर जटिल ऐक्शन दिखाया गया है.

16वीं इमेज. जटिल मोशन बनाने के लिए, इफ़ेक्ट को एक साथ इस्तेमाल करना.

कॉम्प्लेक्स मोशन (3/3)

इस उदाहरण में, पिछले उदाहरणों के एलिमेंट को मिलाकर जटिल ऐक्शन दिखाया गया है.

17वीं इमेज. जटिल मोशन बनाने के लिए, इफ़ेक्ट को एक साथ इस्तेमाल करना.

फ़्रैगमेंट ट्रांज़िशन (1/2)

इस उदाहरण में दिखाया गया है कि फ़्रैगमेंट के बीच ट्रांज़िशन करने के लिए, MotionLayout का इस्तेमाल कैसे किया जा सकता है.

18वीं इमेज. फ़्रैगमेंट ट्रांज़िशन.

फ़्रैगमेंट ट्रांज़िशन (2/2)

इस उदाहरण में दिखाया गया है कि फ़्रैगमेंट के बीच ट्रांज़िशन करने के लिए, MotionLayout का इस्तेमाल कैसे किया जा सकता है.

19वीं इमेज. फ़्रैगमेंट ट्रांज़िशन.

YouTube जैसी मोशन

इस उदाहरण में, अतिरिक्त कॉन्टेंट के साथ कॉम्पैक्ट व्यू और फ़ुल स्क्रीन व्यू के बीच ट्रांज़िशन दिखाया गया है.

20वीं इमेज. YouTube की तरह ही फ़्रैगमेंट ट्रांज़िशन.

KeyTrigger

इस उदाहरण में, ट्रांज़िशन के प्रोग्रेस थ्रेशोल्ड को पार करने पर, फ़्लोटिंग ऐक्शन बटन को दिखाने और छिपाने का तरीका बताया गया है.

21वां डायग्राम. फ़्लोट करने वाले ऐक्शन बटन को दिखाएं और छिपाएं.

कई राज्यों में

इस उदाहरण में, यह तय करने के लिए कि कौनसा मोशन लागू करना है, स्टेटस का इस्तेमाल करने का तरीका बताया गया है.

22वां डायग्राम. राज्य के हिसाब से अलग-अलग मोशन.