أمثلة على MotionLayout

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

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

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

• اطّلِع على ملف XML الخاص بالتصميم.
• اطّلِع على ملف XML الخاص بـ MotionScene.

السمة المخصّصة - backgroundColor

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

• اطّلِع على ملف XML للتصميم.
• اطّلِع على ملف XML الخاص بـ MotionScene.

ImageFilterView - انتقال الصورة

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

• اطّلِع على ملف XML للتصميم.
• اطّلِع على ملف XML الخاص بـ MotionScene.

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

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

• اطّلِع على ملف XML للتصميم.
• اطّلِع على ملف XML الخاص بـ MotionScene.

الاستيفاء بين الإطارات الرئيسية

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

• اطّلِع على ملف XML للتصميم.
• اطّلِع على MotionScene XML.

دورة الإطارات الرئيسية

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

• اطّلِع على ملف XML للتصميم.
• اطّلِع على ملف XML الخاص بـ MotionScene.

CoordinatorLayout (1/2)

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

• اطّلِع على ملف XML الخاص بالتصميم.
• اطّلِع على MotionScene XML.

CoordinatorLayout (2/2)

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

• اطّلِع على ملف XML للتصميم.
• اطّلِع على ملف XML الخاص بـ MotionScene.

DrawerLayout (1/2)

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

• اطّلِع على ملف XML للتصميم.
• اطّلِع على ملف XML الخاص بـ MotionScene.

‫DrawerLayout (2/2)

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

• اطّلِع على ملف XML الخاص بالتصميم.
• عرض MotionScene ملف XML الخاص بالمحتوى الرئيسي
• عرض MotionScene XML للقائمة

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

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

• اطّلِع على ملف XML الخاص بالتصميم.
• اطّلِع على ملف XML الخاص بـ MotionScene.

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

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

• اطّلِع على ملف XML للتصميم.
• اطّلِع على ملف XML الخاص بـ MotionScene.

ViewPager

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

• اطّلِع على ملف XML الخاص بالتصميم.
• اطّلِع على ملف XML الخاص بـ MotionScene.

ViewPager - Lottie

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

• اطّلِع على ملف XML الخاص بالتصميم.
• اطّلِع على ملف XML الخاص بـ MotionScene.

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

يجمع هذا المثال بين عناصر من الأمثلة السابقة لتوضيح الحركة المعقّدة.

• اطّلِع على ملف XML الخاص بالتصميم.
• اطّلِع على MotionScene XML.

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

يجمع هذا المثال بين عناصر من الأمثلة السابقة لتوضيح الحركة المعقّدة.

• اطّلِع على ملف XML الخاص بالتصميم.
• اطّلِع على MotionScene XML.

الحركة المعقّدة (3 من 3)

يجمع هذا المثال بين عناصر من الأمثلة السابقة لتوضيح الحركة المعقّدة.

• اطّلِع على ملف XML للتصميم.
• اطّلِع على MotionScene XML.

انتقال الجزء (1/2)

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

• اطّلِع على ملف XML الخاص بالتصميم.
• اطّلِع على MotionScene XML.

انتقال الجزء (2/2)

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

• اطّلِع على ملف XML للتصميم.
• اطّلِع على MotionScene XML.

حركة شبيهة بحركة YouTube

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

• اطّلِع على ملف XML للتصميم.
• اطّلِع على MotionScene XML.

KeyTrigger

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

• اطّلِع على ملف XML الخاص بالتصميم.
• اطّلِع على MotionScene XML.

عدة ولايات

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

• اطّلِع على ملف XML الخاص بالتصميم.
• اطّلِع على ملف XML الخاص بـ MotionScene.