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

MotionLayout के उदाहरण

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

सामान्य मोशन

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

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

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

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

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

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

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

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

इस उदाहरण में, एक ImageFilterView.

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

तीसरी इमेज. किसी इमेज को खींचकर छोड़ना के रंग को गहरा या फीका किया जाता है.

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

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

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

चौथी इमेज. किसी दृश्य को खींचना और उसके Y पोज़िशन.

कीफ़्रेम इंटरपोलेशन

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

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

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

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

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

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

छठी इमेज. वेवलाइक के साथ व्यू को खींचना और छोड़ना का रंग बदलते समय उसकी गति.

कोऑर्डिनेटरलेआउट (1/2)

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

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

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

कोऑर्डिनेटर लेआउट (2/2)

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

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

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

DrawerLayout (1/2)

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

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

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

DrawerLayout (2/2)

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

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

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

साइड पैनल

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

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

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

पैरालैक्स

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

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

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

व्यूपेजर

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