أمثلة على MotionLayout

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

الحركة الأساسية

يحتوي هذا المثال على طريقة عرض واحدة يمكنك لمسها وسحبها للتحريك أفقيًا.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 1. سحب طريقة عرض.

السمة المخصّصة: colorcolor (الخلفية)

يشبه هذا المثال مثال الحركة الأساسية. بالإضافة إلى الحركة الأساسية، يتغير لون خلفية العرض مع تحركه.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 2. سحب عرض أثناء تغيير لون الخلفية.

ImageFilterView - نقل الصورة

يوضح هذا المثال كيفية تحويل قيمة تشبُّع اللون ImageFilterView.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 3. سحب صورة أثناء تغير تشبعها.

موضع الإطار الأساسي

يستخدم هذا المثال <KeyFrameSet> لتغيير الموضع Y للعرض أثناء الحركة.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 4. سحب عرض وتغيير موضعه Y.

استيفاء الإطار الأساسي

يعتمد هذا المثال على مثال موضع الإطار الرئيسي، مع إضافة الدوران والتحجيم إلى انتقال طريقة العرض.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 5. سحب عرض وتغيير موضعه Y وتدويره وتغيير حجمه.

دورة الإطار الأساسي

يضيف هذا المثال عناصر <KeyCycle> لإضافة حركة تشبه الموجات إلى العرض.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 6. سحب العرض بحركة مثل الموجات مع تغيير لونه.

CoordinatorLayout (1/2)

يضيف هذا المثال MotionLayout إلى AppBarLayout حالي لإضافة حركة إلى شريط التطبيق. هذا المثال يفسّر بشكل أكبر في مقدمة عن MotionLayout (الجزء الثالث).

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 7. محتوى يتم تمريره أثناء توسيع شريط التطبيق

CoordinatorLayout (2/2)

يضيف هذا المثال MotionLayout إلى AppBarLayout حالي لإضافة حركة إلى شريط التطبيق.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 8. تمرير المحتوى أثناء توسيع شريط التطبيق وتحريك النص داخل شريط التطبيق وخارجه

تنسيق درج (1/2)

يوضّح هذا المثال كيفية إضافة حركة إلى DrawerLayout. ستجد شرحًا أكثر تفصيلاً لهذا المثال في مقدمة عن MotionLayout (الجزء الثالث).

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 9. جارٍ توسيع "DrawerLayout".

DrawerLayout (2/2)

يوضّح هذا المثال كيفية إضافة حركة إلى DrawerLayout.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML للمحتوى الرئيسي.
• يمكنك عرض MotionScene XML للقائمة.

الشكل 10. توسيع `DrawerLayout` باستخدام نص قائمة متحركة.

اللوحة الجانبية

يوضح هذا المثال كيفية عرض اللوحة الجانبية عند سحب منطقة المحتوى الرئيسية إلى اليمين.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 11. يتم عرض لوحة جانبية من خلال سحب المحتوى الرئيسي.

اختلاف المنظر

يوضح هذا المثال خلفية المنظر، حيث تتحرك طبقات الخلفية المختلفة بسرعات مختلفة.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 12. تأثير اختلاف المنظر في صورة العنوان.

جهاز ViewPager

يوضّح هذا المثال كيفية إضافة حركة عند التمرير السريع بين ViewPager علامة تبويب. هذا المثال يفسّر بشكل أكبر في مقدمة عن MotionLayout (الجزء الثالث).

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 13. تأثير اختلاف المنظر في صورة العنوان أثناء التمرير السريع على "ViewPager"

ViewPager - Lottie

يوضّح هذا المثال كيفية إضافة حركة عند التمرير السريع بين ViewPager علامة تبويب.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 14. صورة تعرض تأثير "لوتي" في صورة العنوان أثناء التمرير سريعًا على "ViewPager".

حركة معقّدة (1/3)

يجمع هذا المثال بين عناصر من الأمثلة السابقة لإظهار الحركة المعقدة.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 15. دمج التأثيرات لإنشاء حركة معقّدة

حركة معقّدة (2/3)

يجمع هذا المثال بين عناصر من الأمثلة السابقة لإظهار الحركة المعقدة.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 16. دمج التأثيرات لإنشاء حركة معقّدة

حركة معقّدة (3/3)

يجمع هذا المثال بين عناصر من الأمثلة السابقة لإظهار الحركة المعقدة.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 17. دمج التأثيرات لإنشاء حركة معقّدة

نقل جزء (1/2)

يوضّح هذا المثال طريقة استخدام MotionLayout للتنقل بين الأجزاء.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 18. نقل جزء.

نقل جزء (2/2)

يوضّح هذا المثال طريقة استخدام MotionLayout للتنقل بين الأجزاء.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 19. نقل جزء.

حركة تشبه YouTube

يوضح هذا المثال الانتقال بين العرض المكثّف وتجربة ملء الشاشة مع محتوى إضافي.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 20. تنتقل الأجزاء بشكل مشابه لمنصة YouTube.

مشغّل المفاتيح

يوضح هذا المثال كيفية إظهار زر إجراء عائم وإخفائه عندما يتجاوز الانتقال الحد الأدنى للتقدم.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 21. يمكنك إظهار زر إجراء عائم وإخفاؤه.

عدة ولايات

يوضّح هذا المثال كيفية استخدام الحالة لتحديد الحركة المطلوب تطبيقها.

• اعرض تنسيق XML.
• يمكنك الاطّلاع على MotionScene XML.

الشكل 22. حركات مختلفة حسب الحالة