أمثلة على MotionLayout

تجربة ميزة "الكتابة"

‫Jetpack Compose هي مجموعة أدوات واجهة المستخدم المُقترَحة لنظام التشغيل Android. تعرَّف على كيفية استخدام الصور المتحركة في ميزة "الكتابة".

الصور المتحركة في ميزة "الكتابة الصوتية" →

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

حركة أساسية

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

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

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

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

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

• اطّلِع على ملف 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. الانتقال إلى أعلى المحتوى أثناء توسيع شريط التطبيق وظهور النص بشكل متحرك داخل شريط التطبيق وخارجه

DrawerLayout (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. صورة تعرض تأثير Lottie في صورة العنوان أثناء التمرير سريعًا في "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

KeyTrigger

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

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

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

عدة ولايات

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

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

الشكل 22. طلبات مختلفة حسب الولاية