इस पेज का अनुवाद Cloud Translation API से किया गया है.

MotionLayout के उदाहरण

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

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

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

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

लेआउट एक्सएमएल देखें.
MotionScene एक्सएमएल देखें.

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

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

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

लेआउट एक्सएमएल देखें.
MotionScene एक्सएमएल देखें.

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

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

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

लेआउट एक्सएमएल देखें.
MotionScene एक्सएमएल देखें.

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

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

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

लेआउट एक्सएमएल देखें.
MotionScene एक्सएमएल देखें.

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

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

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

लेआउट एक्सएमएल देखें.
MotionScene एक्सएमएल देखें.

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

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

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

लेआउट एक्सएमएल देखें.
MotionScene एक्सएमएल देखें.

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

CoordinatorLayout (1/2)

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

लेआउट एक्सएमएल देखें.
MotionScene एक्सएमएल देखें.

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

CoordinatorLayout (2/2)

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

लेआउट एक्सएमएल देखें.
MotionScene एक्सएमएल देखें.

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

DrawerLayout (1/2)

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

लेआउट एक्सएमएल देखें.
MotionScene एक्सएमएल देखें.

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

DrawerLayout (2/2)

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

लेआउट एक्सएमएल देखें.
MotionScene मुख्य कॉन्टेंट के लिए एक्सएमएल देखें.
मेन्यू के लिए MotionScene एक्सएमएल देखें.

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

साइड पैनल

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

लेआउट एक्सएमएल देखें.
MotionScene एक्सएमएल देखें.

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

पैरालैक्स

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

लेआउट एक्सएमएल देखें.
MotionScene एक्सएमएल देखें.

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

ViewPager

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